如何減少選擇框中的下拉框寬度

我有選擇框字段與向下的image.when我有選擇，下拉框寬度放大，然後原始選擇框的寬度。如何減少選擇框中的下拉框寬度

enter image description here

代碼：

<div id="styled-select"> 
    <select name="group" id="group"> 
     <option val="">Please choose</option> 
     <option val="1">Option 1</option> 
     <option val="2">Option 2</option> 
     <option val="3">Option 3</option> 
     <option val="4">Option 4</option> 
    </select> 
</div> 

#styled-select { 
    width: 260px; 
    height: 34px; 
    overflow: hidden; 
    background: url("../img/downarrow_blue.png") no-repeat right #fff; 
    border: 1px solid #ccc; 
    margin:auto; 
    border-radius:6px; 
} 
#styled-select select { 
    background: transparent; 
    width: 282px; 
    padding: 5px; 
    font-size: 15px; 
    line-height: 1; 
    border: 0; 
    border-radius: 0; 
    height: 34px; 
    -webkit-appearance: none; 
    font-family:helvetica-roman; 
    color:#9C9C9C; 
}

當我已經改變＃風格-選擇選擇{寬度：260px; }。我在Firefox中得到了這個輸出。

enter image description here

如何減少下拉框寬度等於選擇框。

來源

2014-02-14 Kennedy

可能的重複：http://stackoverflow.com/questions/1702186/set-width-of-dropdown-element-in-html-select-dropdown-options –

@Kennedy請讓我知道如果我的答案適合你或如果您對答案有任何疑問。請接受我的答覆作爲正確的答案，如果它對您有用 - 以便其他用戶可以從中受益：知道答案有效並將問題標記爲「已答覆」。 – DhruvJoshi

@Kennedy我希望你正在嘗試我最新的小提琴而不是早期版本。再次鏈接並相信我，我親自在FF和Chrome上進行了測試。 http://jsfiddle.net/9SfJ7/2/ – DhruvJoshi

可以通過財產width對您的css #styled-select select進行更正。這裏的小提琴link用於演示

#styled-select select { 
    background: transparent; 
    width: 260px; 
    padding: 5px; 
    font-size: 15px; 
    line-height: 1; 
    border: 0; 
    border-radius: 0; 
    height: 34px; 
    -webkit-appearance: none; 
    font-family:helvetica-roman; 
    color:#9C9C9C; 
    background-color: rgba(0, 0, 0, 0); 
    -webkit-appearance: none; 
    border: none; 
    text-indent: 0.01px; 
    text-overflow: ''; 
}

PS： 請注意，向下箭頭顯示了你的形象是FF的特點，預計不會很快被糾正的任何時間。

我現在意識到爲什麼你把額外的寬度放在第一位，因爲這是解決FF向下箭頭的一種解決方法。

來源

2014-02-14 11:56:15 DhruvJoshi

當我將寬度更改爲260px.I在firefox.I中獲取了默認箭頭時上傳了有問題的圖像。 – Kennedy

更新了我的答案並提供了FF – DhruvJoshi

@Kennedy如果您發現我的答案有用，請將其標記爲答案 – DhruvJoshi

設置等於width兩個#styled-select和#styled-select select

#styled-select { 
     width: 260px; 
     height: 34px; 
     overflow: hidden; 
     background: url("../img/downarrow_blue.png") no-repeat right #fff; 
     border: 1px solid #ccc; 
     margin:auto; 
     border-radius:6px; 
    } 
    #styled-select select { 
     background: transparent; 
     width: 260px; 
     padding: 5px; 
     font-size: 15px; 
     line-height: 1; 
     border: 0; 
     border-radius: 0; 
     height: 34px; 
     -webkit-appearance: none; 
     font-family:helvetica-roman; 
     color:#9C9C9C; 
    }

來源

2014-02-14 11:58:03 Sam1604

請改變#styled-select selectwidth:282px以相同親值#styled-select的width:260px ..

的jsfiddle：http://jsfiddle.net/nikhilvkd/6aPUh/1/

#styled-select select { 
    background: transparent; 
    width: 260px;/*change here*/ 
    padding: 5px 0; 
    font-size: 15px; 
    line-height: 1; 
    border: 0; 
    border-radius: 0; 
    height: 34px; 
    -webkit-appearance: none; 
    font-family:helvetica-roman; 
    color:#9C9C9C; 
}

來源

2014-02-14 11:59:41 Krish

如何減少選擇框中的下拉框寬度

回答

相關問題