從禁用選擇中刪除向下箭頭

Question

        <select>
               <option value="volvo">Volvo</option>
               <option value="saab">Saab</option>
               <option value="mercedes" selected>Mercedes</option>
               <option value="audi">Audi</option>
       </select>    

$('select').attr('disabled', 'disabled');

可以使用jQuery或只是Javascript或HTML刪除禁用選擇中的向下箭頭？

的jsfiddle

Answer 1

這是可行的，是的：

select[disabled] {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

實例： http ： //jsfiddle.net/joaocunha/UhfcA/1/ （ 確保檢查內部的要點以了解它是如何工作的 ）。

順便說一下，我和@ThiefMaster在一起：可行並不意味着應該這樣做。 刪除選擇箭頭而不提供自定義箭頭是一種非常糟糕的用戶體驗。

Answer 2

這是不可能的（尤其不適用於所有瀏覽器）。

你無論如何都不應該這樣做，因為禁用的選擇框仍然有箭頭 - 而且做一些與用戶操作系統通常不同的事情通常是不好的。

Answer 3

不，這是不可能的（至少是跨瀏覽器），正如@ThiefMaster所說（+1），在任何情況下都不是一個好主意，因為你正在擾亂用戶UI的預期規范。

盡管如此，如果你堅持，你將需要使用下拉菜單的HTML模擬，而不是select標記， 就像我在大約100年前制作的那樣。 這些天可能有更好的。

Answer 4

您還可以使用css overflow：隱藏在父級中。 這樣，您可以向右裁剪選擇框，刪除箭頭。

CSS：

<style>
    .selectParent{width:80px;overflow:hidden;}
    .selectParent>select{width:100px;}
</style>

加價：

 <div class="selectParent">
     <select>
           <option value="volvo">Volvo</option>
           <option value="saab">Saab</option>
           <option value="mercedes" selected>Mercedes</option>
           <option value="audi">Audi</option>
     </select>  
 </div>

Answer 5

這是不可能的。

嘗試這樣的事情。 （使用CSS自定義）

$('select').change(function(){
    $('<input />').val($(this).val()).appendTo($(this).parent()).attr('readonly','readonly').attr('disabled','disabled');
    $(this).remove();
});

如果在頁面加載時select已經帶有值。

var mySelectBox = $('select');
$('<input />').val($(mySelectBox).val()).appendTo($(mySelectBox).parent()).attr('readonly'‌​,'readonly').attr('disabled','disabled');
$(mySelectBox).remove();

Answer 6

在Webkit （Chrome，Safari）中 ，您可以在Css中指定：

-webkit-appearance: none;
代替
-webkit-appearance: menulist;

這樣你就不會有任何Select preformatted Css，也就是說沒有箭頭。
但正如ThiefMaster說的那樣 ，最好的辦法就是保持它像操作系統通常那樣。

Answer 7

它不是這樣做的。

通常，“樣式化”選擇僅僅是另一種類型的元素，其中應用了css顏色，漸變，圖像等以賦予其下拉感。

例如，您可以放下輸入代替它，並選擇下拉列表。

CSS

.input.select { background: url('downarrow.jpg') no-repeat right top; }
.selectOptions { display: block; width: 100px; height: 200px; background: white; }

標記

<div>
    <input type="text" class="select" value="click me" />
    <div class="selectOptions">
        <ul>
            <li val="some custom value">option</li>
        </ul>
    </div>
</div>

在jquery你會做這樣的事情：

$('input.select').bind('click', function() {
    $(this).find('div.selectOptions').toggle();
});

$('div.selectOptions ul li').bind('click', function() {
    var val = $(this).attr('val');
    // update the input upon click.
    var input = $(this).parent().parent().parent().find('input.select');
    input.val( val );
});

當然你可以使用別人的跨瀏覽器庫來做這種事情......比如jQuery UI。