0

在我的 asp.net 网络应用程序中，下拉列表和文本框的大小在 Chrome 中显示相同，但​​在 Safari 浏览器中查看时，下拉列表的大小与文本框的大小相比会缩小

这是我的html代码

<div>
    <select
    id="ddlState"
    placeholder="optional"
    class="select"
    title="Select Role">
        <option value="0">state</option>
   </select>
</div>

<div>
    <input
    maxlength="100"
    id="txtCity"
    placeholder="City"
    class="inpt"
    />
</div>

这是我的风格

     .select
{
    width: 224px;
    border: none;
    font: normal 14px/16px "HelveticaNeueLTCom45Light" , Georgia,serif;
    display: block;
    float: none;
    height: 32px;
    margin-top: 9px;
    color: #6d6e71;
    padding: 0px 4px 0px 4px;
    background: url(../images/selectbg.png) no-repeat right 9px #fff;
}

.inpt{
     border: none;
    font: normal 15px/16px "HelveticaNeueLTCom45Light" , arial,serif;
    margin: 8px 0 15px 0;
    padding: 7px 4px 8px 4px;
    color: #6d6e71;
    width :216px;
}

这是jsfiddle的链接

4

1 回答 1

2

试试下面的 Js fiddle

http://jsfiddle.net/7STj4/8/

设置-webkit-appearance: none;为选择

于 2013-08-23T06:56:10.110 回答