Select 盒子不符合 css 风格？

Question

我希望输入框和 select 框看起来一样，大小也一样。输入框似乎遵循 CSS 样式，但 select 框变小了一点...

<!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>

Answer 1

因为select是默认CSS风格box-sizing: border-box;而input没有默认css风格box-sizing: border-box;

您应该尝试此代码或添加 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>

Select 盒子不符合 css 风格？

Select box doesn't obey css style?

html

css

forms

drop-down-menu