Custom Character sheet - customize the size of a pull-down menu

Hello guys, I am pretty new in coding so I go slowly and my issue can seem really basic but on the character sheet I am creating I have an attribute list but the problem is that the input are different kinds (numbers and pull-down) and therefore different visual width. I tried to edit the pull-down menu in CSS to match the width of the number column but it doesn't seem to work. HTML <table>         <tr>           <th>Physical Attribute</th>           <th>Score</th>         </tr>         <tr>           <td >Physical Damage</td>           <td><select classe ="sheet-select1" name="attr_phydam">               <option value="0" >1</option>               <option value="1" >1d2</option>               <option value="2" >1d3</option>               <option value="3" >1d4</option>               <option value="4" >1d5</option>               <option value="5" >1d6</option>               <option value="6" >1d8</option>               <option value="7" >1d10</option>               <option value="8" >1d12</option>               <option value="9" >1d6+1d8</option>               <option value="10" >2d8</option>               <option value="11" >1d10+1d8</option>               <option value="13" >2d10</option>               <option value="14" >1d10+1d12</option>               <option value="15" >2d12</option>               <option value="16" >2d10+1d6</option>               <option value="17" >2d10+1d8</option>               <option value="17" >3d10</option>                          </select></td>         </tr>         <tr>           <td>Physical Actions</td>           <td><input type="number" value="floor((@{acuscore})/20)" disabled="true" name="attr_pact"></td>         </tr>         <tr>           <td>Physical Initiative</td>           <td><input type="number" value="floor((@{vglscore})/10)" disabled="true" name="attr_pini"></td>         </tr>         <tr>           <td>Physical Speed</td>           <td><input type="number" value="(((@{movscore})/10)+2)" disabled="true" name="attr_pspe"></td>         </tr>       </table> CSS .sheet-select1 {     width:40px;  } Thanks in advance. 

Try changing your CSS to: select.sheet-select1 {     width:40px;  } Roll20 has a lot of styling that overrides what we put in character sheets unless we get more specific like the above. Also, as an aside, if this is a sheet you're hoping to add to the Character Sheet repository for Roll20 on GitHub, you'll want to change your HTML a bit to move away from using a table, that is no longer supported for character sheets available via the drop drown. You'd want to convert to something like CSS Grid. I prefer flex box myself, but I know a lot of there sheet designers really like CSS Grid.

Thank you Finderski.  I tried to change the css but it doesn't work. It is only for visual so it's not my top priority but it bothers me a bit.  I tried as you said to get rid of the table and used css grid but it didn't had an impact on the pull-down width. Anyway, thank you for your time.  Have a good one. 

Selects are notoriously difficult to style. But the problem here looks like a typo. You have <select classe ="sheet-select1" name="attr_phydam"> and it should be <select class="sheet-select1" name="attr_phydam">

Oh thank you very much Gigs.  I found another way to solve my problem and it is actually very simple.  <select name="attr_phydam" style="width:100px"> This solve the width problem pretty easily, Thanks for your time guys and sorry for the typo.

Generally its best to avoid hardcoded styles like this, because it easily leads to a lot of duplicated code. The class approach is better. But if you're more comfortable with it, go for it :)