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模拟，而不是{100}之前制作的select标记like this one。这些天可能会有更好的。

Answer 4

您还可以在父级中使用css overflow：hidden。这样，您可以向右裁剪选择框，删除箭头。

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预先格式化的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。

从禁用选择中删除向下箭头

7 个答案: