Styling Select Element for Cross-Browser Support

Hello! I'm having a problem getting a <select> element to line up with <imput> elements. The <select> element is aligned differently between Chrome and Firefox. The difference is only 2 pixels, but that's enough to bother me. Chrome: Firefox: I've managed to resolve this issue before, but no solutions seem to work now. I need to start from scratch, but nothing I've found helps. I'm at a loss and need some assistance. Is there any way to change the top margin of a <select> element to be different for different browsers?

Without seeing the code, nor knowing what all you've tried... have you tried: white-space :  nowrap ; In your CSS for the element? May need it on the parent div/span/whatever you have contained in.

I've previously tried some of these, and right now they actually seem to be working if I use at least 2 of them together, but I'm not sure why. @media screen and (-moz-images-in-menus:0) { select{margin-top: -2px !important;} } @supports (-moz-appearance:none) { select{margin-top: -2px !important;} } @-moz-document url-prefix(){ select{margin-top: -2px !important;} }

Actually, that doesn't work. It shows correctly in the preview, affecting only Firefox. However, when I load up the campaign, it's clearly affecting both browsers.

The image is too small for me to tell what is misaligned, but it looks like you are trying to adjust vertical alignment? Have you tried applying margin-bottom: 0px to your selects? It works for me in Firefox: And in Chrome:

I've managed to get it aligned, thanks!