Select input sits higher than other inputs

This is really bugging me and my OCD. Here's the html (no CSS): <input type="text" name="attr_first" placeholder="First Input" style="width:100px;" > <select name="attr_options" style="width:100px;"> <option value="0"></option> <option value="1">Example</option> </select> <input type="text" name="attr_second" placeholder="Second Input" style="width:100px;" > And here's what that produces: The select input is positioned slightly higher than the others. Can anybody tell me how to make it sit in line with them?

If I remember right, it has a default margin, so you need to specify a margin of 0 in your css.

Hasn't changed anything. Unless my CSS attempt is wrong? CSS: select {   margin-bottom: 0px; }

On the sheet of mine that has some drop down selects, I gave them a class, referenced that class, and then simply used: margin:0;

I must still be doing something wrong. Here's what I've got: <input type="text" name="attr_first" placeholder="First Input" style="width:100px;" > <select name="attr_options" style="width:100px;" class="styled-select"> <option value="0"></option> <option value="1">Example</option> </select> <input type="text" name="attr_second" placeholder="Second Input" style="width:100px;" > .styled-select {     margin: 0; } But no change.

Other things to look for: what the box-sizing for the elements is set to What the border-widths are set to What layout mechanism you are using (flexbox, CSS grid, just normal html inline, etc) Do you have any margins on your text inputs?

I didn't look at the next layer out.  In my sheet, they are also being affected by the css rules for the containing div, which includes: align-items:center;

Kraynic said: I didn't look at the next layer out.  In my sheet, they are also being affected by the css rules for the containing div, which includes: align-items:center; You mean like this? <input type="text" name="attr_first" placeholder="First Input" style="width:100px;" > <select name="attr_options" style="width:100px;" class="styled-select"> <option value="0"></option> <option value="1">Example</option> </select> <input type="text" name="attr_second" placeholder="Second Input" style="width:100px;" > .charsheet {     align-items: center; } .styled-select {     margin: 0; } Still nothing. What would you do to the above code to make it line up?

Scott C. said: Other things to look for: what the box-sizing for the elements is set to What the border-widths are set to What layout mechanism you are using (flexbox, CSS grid, just normal html inline, etc) Do you have any margins on your text inputs? The code I've posted is literally all the code in the sheet – I've set nothing else to anything else and I have no idea what the defaults are. I also don't know what those (or any) layout mechanisms are.

Aero said: The code I've posted is literally all the code in the sheet – I've set nothing else to anything else and I have no idea what the defaults are. I also don't know what those (or any) layout mechanisms are. Roll20 applies some basic CSS to all sheets, which you wont see just looking at the sheet code. If you use your browser's Inspect Element feature, you can see what code is applied to each element, and you'll see there's a lot more being applied invisibly. You often have to override that to get the layout you want.

I've never tried to style the .charsheet layer of things, so don't know how well that works, or if we are barred from actually changing much there. <div class="testsection">     <input type="text" name="attr_first" placeholder="First Input" style="width:100px;" >     <select name="attr_options" style="width:100px;" class="styled-select">         <option value="0"></option>         <option value="1">Example</option>     </select>     <input type="text" name="attr_second" placeholder="Second Input" style="width:100px;" > </div> .testsection {     align-items: center; } .styled-select {     margin: 0; } Also, do you have the legacy mode set to true or false?  If you have it set to true, then none of your css will work without having .sheet- in front of everything in the css.  If you have it set to true, you should really set it to false and write your sheet in the newer format.  (And I really should be rewriting mine to move them to the new format from the old.)

Just to throw something else into the mix; after the CSE update there were many classes/styles that could be "suppressed" by roll20's default css which caused strange layout/design issues in many sheets. By wrapping your html in an outer element and class and including it in your css, you can help raise the specificity of your classes over the defaults.  Another option is to simply include .charsheet in your css for all non-rolltemplate(roll-templates still require special handling) defined classes. ie .charsheet select {...}