Question

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

<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中看起来很糟糕。

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

Answer 1

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

你可以使用css-reset来尝试均衡所有浏览器默认值，或者为你的css添加一些其他规则（行高，字体设置，边距等） - 有效地创建你自己的CSS - 重新规则。

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

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

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

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

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

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

1 个答案: