CSS使选择框的大小与我的输入文本框相同

我已经尝试了很多不同的东西，并在网上查看，但我无法确定如何在对齐的表单中以及以相同的大小显示我的框。CSS使选择框的大小与我的输入文本框相同

我正在使用一个窗体和窗体内部的一个表。该表作为一类，从那里我尝试给我的输入宽度和高度，并选择：

table.form-override { 
    border-collapse: collapse; 
} 
table.form-override tr td { 
    border-top-style: none; 
    border-right-style: none; 
    border-bottom-style: none; 
    border-left-style: none; 
    padding-bottom: 5px; 
} 
table.form-override label { 
    padding-right: 10px; 
    vertical-align:center; 
} 
table.form-override input, select, option { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 
table.form-override input, select { 
    width: 300px; 
    height: 35px; 
    border : 1px #ccc solid; 
    vertical-align: center; 
}

但当然，它不工作。

我该如何做到这一点？

谢谢。

来源

2014-09-11 Richard

也许尝试'table.form-override select'而不是'select'？你能创建一个小提琴来展示实际发生的事情吗？ – putvande 2014-09-11 08:48:12

是的，我同意putvande。由于您只使用'select'作为您的选择器，所以在选择之前或之后可能会有更高的排名选择器。尝试改变：'table.form-override input，select，option'到'table.form-override input，table.form-override select'（不需要赋予'option'元素框 - 调整afaik） – powerbuoy 2014-09-11 08:50:57

哈哈不错。它正在工作。最后一件事是它的尺寸与我的输入尺寸不完全相同，所以选择的尺寸稍小一些。任何理由？ – Richard 2014-09-11 08:55:42

-1

你的CSS工作正常 - 见http://codepen.io/raad/pen/FniEy

</style> 
body, td, form { 
    padding: 5px; 
} 
table.form-override { 
    border-collapse: collapse; 
    background-color: #fdf; 
} 
table.form-override tr td { 
    border-top-style: none; 
    border-right-style: none; 
    border-bottom-style: none; 
    border-left-style: none; 
    padding-bottom: 5px; 
} 
table.form-override label { 
    padding-right: 10px; 
    vertical-align:center; 
} 
table.form-override input, select, option { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 
table.form-override input, select { 
    width: 300px; 
    height: 35px; 
    border : 1px #ccc solid; 
    vertical-align: center; 
} 
</style> 

<form> 
    <table class="form-override"> 
    <tr> 
     <td>Hello</td> 
     <td><input type="text" /></td> 
    </tr> 
    <tr> 
     <td>World</td> 
     <td> 
     <select> 
      <option value="1">One</option> 
      <option value="2">Two</option> 
      <option value="3">Three</option> 
     </select> 
     </td> 
    </tr> 
    </table> 
</form>

你可能需要的是像Normalize或Reset复位。

尽管这些更多地用于减少默认对象度量标准中的浏览器不一致性，但它们可能有助于为不同的对象提供相同的度量标准。

来源

2014-09-11 09:12:40 Raad

它可能在你的例子中工作，但可能不适用于OP。为'select'取得了一个取舍的样式，这使得这个代码无法工作。 – putvande 2014-09-11 09:42:37

CSS使选择框的大小与我的输入文本框相同

回答

相关问题