javascript 从禁用选择中删除向下箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11637507/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove the down arrow from disable select
提问by Paul Jeggor
<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');
is possible to remove the down arrow in disabled select with jQuery or simply Javascript or HTML?
是否可以使用 jQuery 或简单的 Javascript 或 HTML 删除禁用选择中的向下箭头？
回答by Jo?o Cunha
This is doable, yes:
这是可行的，是的：
select[disabled] {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Live example: http://jsfiddle.net/joaocunha/UhfcA/1/(make sure to check the gist inside to understand how it works).
现场示例：http: //jsfiddle.net/joaocunha/UhfcA/1/（确保检查里面的要点以了解它是如何工作的）。
BTW, I'm with @ThiefMaster: doable doesn't mean it should be done. Removing the select arrow without providing a custom one is plain bad user experience.
顺便说一句，我和@ThiefMaster 在一起：可行并不意味着应该完成。删除选择箭头而不提供自定义箭头是非常糟糕的用户体验。
回答by ThiefMaster
That's not possible (especially not in a way that works in all browsers).
这是不可能的（尤其是在所有浏览器中都无法使用的方式）。
You shouldn't do this anyway since a disabled select box still has the arrows - and it's usually bad to do things like that different from how the user's OS usually does it.
无论如何你都不应该这样做，因为禁用的选择框仍然有箭头 - 做与用户操作系统通常不同的事情通常是不好的。
回答by Utkanos
No, this is not possible (at least cross-browser), and as @ThiefMaster says (+1), is not a great idea in any case as you are disturbing the expected norms of the user's UI.
不，这是不可能的（至少跨浏览器），并且正如@ThiefMaster 所说（+1），无论如何都不是一个好主意，因为您正在干扰用户 UI 的预期规范。
Nonetheless, if you insist, you will need to use a HTML simulation of a drop-down rather than a selecttag, like this one, which I made about 100 years ago. There's probably better ones around these days.
尽管如此，如果您坚持，您将需要使用下拉菜单的 HTML 模拟而不是select标签，就像我在大约 100 年前制作的那样。这些天可能有更好的。
回答by Jo?o Mosmann
You can also use css overflow:hidden in the parent. That way, you can crop the select box right, removing the arrow.
您还可以在父级中使用 css overflow:hidden 。这样，您可以向右裁剪选择框，删除箭头。
CSS:
CSS：
<style>
.selectParent{width:80px;overflow:hidden;}
.selectParent>select{width:100px;}
</style>
Markup :
标记：
<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>
回答by Jo?o Mosmann
It's not possible.
这是不可能的。
Try something like this. ( customize with CSS )
尝试这样的事情。（使用 CSS 自定义）
$('select').change(function(){
$('<input />').val($(this).val()).appendTo($(this).parent()).attr('readonly','readonly').attr('disabled','disabled');
$(this).remove();
});
If the select is already with a value when page loads.
如果页面加载时选择已经带有值。
var mySelectBox = $('select');
$('<input />').val($(mySelectBox).val()).appendTo($(mySelectBox).parent()).attr('readonly'??,'readonly').attr('disabled','disabled');
$(mySelectBox).remove();
回答by Simon Arnold
In Webkit (Chrome, Safari), you can specify in Css:-webkit-appearance: none;
instead of-webkit-appearance: menulist;
This way you won't have any Select preformatted Css, meaning, no arrow.
But as said ThiefMaster, the best is to keep it like the os usually does it.
在 Webkit (Chrome, Safari) 中，您可以在Css 中指定：-webkit-appearance: none;
而不是-webkit-appearance: menulist;
这样，您将不会有任何 Select 预格式化的 Css，意思是没有箭头。
但正如ThiefMaster所说，最好的办法是像操作系统通常那样保留它。
回答by Kristian
Its not done that way.
它不是那样做的。
Typically a "styled" select is merely an element of another type with css colors, gradients, images, etc applied to it to give it the dropdown feel.
通常，“样式化”选择只是另一种类型的元素，其中应用了 css 颜色、渐变、图像等，以赋予它下拉的感觉。
for example, you could place an input down in place of it, with a dropdown of your choices.
例如，您可以放置一个输入来代替它，并下拉您的选择。
css
css
.input.select { background: url('downarrow.jpg') no-repeat right top; }
.selectOptions { display: block; width: 100px; height: 200px; background: white; }
markup
标记
<div>
<input type="text" class="select" value="click me" />
<div class="selectOptions">
<ul>
<li val="some custom value">option</li>
</ul>
</div>
</div>
and in jquery you'd do something like this:
在 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 );
});
Of course you could just use someone else's cross browser library that does that kind of stuff already... like jQuery UI.
当然，您可以只使用其他人的跨浏览器库，该库已经可以执行此类操作……例如 jQuery UI。
