自定义选择和输入标签，IE版本看起来很糟糕

Customizing Select And Input tags, IE version looks awful

本文关键字：看起来 版本 IE 选择 输入 标签 自定义      更新时间：2023-09-26

我正在尝试创建一个搜索栏、类别选择和搜索查询
我试着让它们看起来都是一样的，同样大小的字体
但我不希望选项看起来与选择标签大小相同

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);
}
`

这就是我所想的，它是我想要的风格和尺寸
但它在InternetExplorer中看起来很糟糕。

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

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

您可以使用css重置来尝试均衡所有浏览器默认值，也可以在css中添加一些其他规则（行高、字体设置、边距等），从而有效地创建自己的css重置规则。

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

你可能会发现使用很有用

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

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

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

相关文章：