6 
        <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

4

7 回答 7

12

这是可行的，是的：

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

现场示例： http: //jsfiddle.net/joaocunha/UhfcA/1/（请务必查看里面的要点以了解其工作原理）。

顺便说一句，我和@ThiefMaster 在一起：可行并不意味着应该这样做。在不提供自定义箭头的情况下删除选择箭头是非常糟糕的用户体验。

于 2013-08-24T12:34:27.897 回答
4

这是不可能的（尤其是不能在所有浏览器中使用）。

无论如何你都不应该这样做，因为禁用的选择框仍然有箭头 - 做与用户操作系统通常不同的事情通常是不好的。

于 2012-07-24T19:00:36.720 回答
2

不，这是不可能的（至少跨浏览器），正如@ThiefMaster 所说（+1），在任何情况下都不是一个好主意，因为您正在扰乱用户 UI 的预期规范。

尽管如此，如果您坚持，您将需要使用下拉菜单的 HTML 模拟，而不是select标签，例如我在 100 年前制作的这个。这些天可能有更好的。

于 2012-07-24T19:06:49.697 回答
2

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

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>
于 2012-07-24T19:22:38.760 回答
1

这是不可能的。

尝试这样的事情。（用 CSS 自定义）

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

如果在页面加载时选择已经具有值。

var mySelectBox = $('select');
$('<input />').val($(mySelectBox).val()).appendTo($(mySelectBox).parent()).attr('readonly'‌​,'readonly').attr('disabled','disabled');
$(mySelectBox).remove();
于 2012-07-24T19:04:14.033 回答
1

在 Webkit (Chrome, Safari)中，您可以在Css中指定：

-webkit-appearance: none;
而不是
-webkit-appearance: menulist;

这样，您将不会有任何 Select 预格式化的 Css，即没有箭头。
但是正如ThiefMaster所说，最好的方法是像操作系统通常那样保持它。

于 2012-07-24T19:05:09.150 回答
1

它不是那样做的。

通常，“样式化”选择只是另一种类型的元素，其中应用了 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。

于 2012-07-24T19:06:32.007 回答