从禁用选择

 <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

来源

2012-07-24 Paul Jeggor

首先，使用'.prop（'disabled'，true）'而不是将属性设置为字符串。 – ThiefMaster 2012-07-24 18:58:56

如何使用类似的CSS而不是选择列表显示div？ – Dev 2012-07-24 19:01:16

http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox是相关的 – fardjad 2012-07-24 19:01:35

这是不可能的（尤其不要在在所有浏览器上运行的方式）。

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

来源

2012-07-24 19:00:36 ThiefMaster

现在它适用于所有主流浏览器：https：//gist.github.com/joaocunha/6273016 – 2013-08-24 12:25:35

这是不可能的。

尝试类似这样的东西。（使用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();

来源

2012-07-24 19:04:14

谢谢，但我怎么能没有改变？如果文档已准备好，我有这个。 – 2012-07-24 19:08:10

因此... var mySelectBox = $（'select'）; （'readonly'，'readonly'）。attr（'disabled'，''）'（'（'''''''）'.val（$（mySelectBox）.val（）禁用'）; $（mySelectBox）.remove（）; – 2012-07-24 19:19:00

http://jsfiddle.net/KRn4a/6/这不起作用 – 2012-07-24 19:21:34

在Webkit中器（Chrome，Safari浏览器），您可以在的CSS注明：

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

这样，你不会有任何选择预先格式化Css，意思是没有箭头。
但正如说ThiefMaster，最好的是保持它像通常的操作系统。

来源

2012-07-24 19:05:09

它没有这样做。

通常，“样式”选择仅仅是另一种类型的元素，其中应用了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-24 19:06:32 Kristian

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

但是，如果您坚持，您将需要使用HTML模拟下拉菜单，而不是使用大约100年前制作的select标记like this one。这些日子里可能会有更好的。

来源

2012-07-24 19:06:49 Utkanos

您还可以使用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>

来源

2012-07-24 19:22:38

这是可行的，是：

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

活生生的例子：http://jsfiddle.net/joaocunha/UhfcA/1/（请务必检查里面的要点理解它是如何工作的）。

顺便说一句，我与@ThiefMaster：可做并不意味着它应该完成。在不提供自定义箭头的情况下移除选择箭头是非常不好的用户体验。

来源

2013-08-24 12:34:27

回答

相关问题