Select box doesn't obey css style?

Viewed 31

I want the input box and select box to look the same and have the same size. The input box seems to obey the CSS style, but the select box gets a little smaller...

<!DOCTYPE html>
<html>
  <head>
    <style>
      .formfld {width:200px; height:50px; margin:0; padding:0;
        border:1px; border-style:solid; border-color:black;}
    </style>
  </head>
  <body>
      <input type="text" name="amount" class="formfld" value="" />
      <br/>
      <select name="cardtype" class="formfld">
        <option value="Visa">Visa</option>
        <option value="Mastercard">Mastercard</option>
      </select>
  </body>
</html>
1 Answers

Because of the select is default CSS style box-sizing: border-box; and inputhas not default css style box-sizing: border-box;

You should try this code or add in style box-sizing: border-box;

<!DOCTYPE html>
<html>
  <head>
    <style>
      .formfld {width:200px; height:50px; margin:0; padding:0;
        border:1px; border-style:solid; border-color:black;box-sizing: border-box;}
    </style>
  </head>
  <body>
      <input type="text" name="amount" class="formfld" value="" />
      <br/>
      <select name="cardtype"  class="formfld">
        <option value="Visa">Visa</option>
        <option value="Mastercard">Mastercard</option>
      </select>
  </body>
</html>

Related