2

我正在尝试制作搜索栏、类别选择和搜索查询。
我试图让它们看起来都相同，相同大小的字体。
但我不希望选项看起来与选择标签的大小相同

http://jsfiddle.net/gg8RD/

<table>
<tr>
    <td>
        <div class="searchInput" style="postion:relative">
            <select onchange="document.getElementById('category').value = this.options[this.selectedIndex].text">
                <optgroup>
                    <option>Cat 1</option>
                    <option>Cat 2</option>
                    <option>Cat 3</option>
                </optgroup>
            </select>
            <input id="category" style="postion:absolute width:300px" placeholder="Choose A Cateogry" value="Choose A Category">
        </div>
    </td>
    <td>
        <div class="searchInput">
            <input type="text" placeholder="Search Query">
        </div>
    </td>
</tr>


div.searchInput input {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    height: 100%;
}
div.searchInput select {
    border:none;
    font-size:20px;
    padding:0px;
    margin:0px;
     height:38px;
    width:300px;
    color:transparent;position:absolute; 
     background-color:transparent;
}
div.searchInput {
    color:black;
    background-color: white;
}

div.searchInput {
    overflow: hidden;
    margin:0px;
    padding:0px;
    width:300px; border: 
    1px #000000 solid;}

body {
    font-family:Helvetica Neue,Arial,Helvetica, sans-serif;
    font-size: 16px;
    background: #666;
    background:rgba(9,9,9,0.6);
}
`

是我想出的，它围绕着我想要的风格和尺寸。
但它在 Internet Explorer 中看起来很糟糕。

为什么是这样？我怎样才能让它们看起来一样？如果没有：我的下一条道路是什么？

4

1 回答 1

1

每个浏览器都有自己的默认 css 规则和行为，这在表单元素中尤为明显。

您可以使用 css-reset 尝试均衡所有浏览器默认设置，或者向您的 css 添加许多其他规则（行高、字体设置、边距等） - 有效地创建您自己的 css-reset 规则.

就个人而言，我不会试图让它们在所有浏览器中看起来都相同——这是不可能的。我只会在不同的浏览器中测试它们，并确保它们在每个浏览器中都是可展示的（它们可以工作）。

您可能会发现使用它很有用：

select, option, input { font-family: inherit; }

也许inherit对于其他规则，但尝试格式化选项元素是有问题的。

本文进一步讨论了使用 css 设置表单元素样式的问题。

于 2013-08-24T23:38:59.773 回答