javascript 控制选择框的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3905655/
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
controlling the width for a select box
提问by Sachindra
i was trying to change the width of a particular optional value under <select>attribute, something like this. But i am getting troubled as in IE the select box along with the option value gets expanded. Is there any simple way to make the <option>only to expand and not the <select>box.. mainly in IE ....
我试图更改<select>属性下特定可选值的宽度，例如这样。但是我遇到了麻烦，因为在 IE 中，选择框和选项值都被扩展了。有什么简单的方法可以使<option>唯一的扩展而不是<select>框......主要是在IE中......
回答by Cobra_Fast
<select width="123" style="width: 123px;">...</select>
Seems to be quite compatible solution working with all newer browsers.
似乎是适用于所有较新浏览器的非常兼容的解决方案。
回答by Hussein
This can be done using the jQuery plugin found at
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/#demo
这可以使用位于http://www.jainaewen.com/files/javascript/jquery/ie-select-style/#demo的 jQuery 插件来完成
The plugin is very simple to use. Here's a breakdown of some full working code.
该插件使用起来非常简单。这是一些完整工作代码的细分。
HTML
HTML
<select id="test" >
<option>choose on</option>
<option>aaaaaaaaaaaaaaaaaaaaaaa</option>
<option>bbbbbbbbbbbbbbbbbbbbbbb</option>
<option>ccccccccccccccccccccccc</option>
<option>ddddddddddddddddddddddd</option>
</select>
CSS
CSS
#test{
width:100px;
border:1px solid red;
}
jQuery
jQuery
Don't forget to include the jQuery Js file and this plugins' Js file.
不要忘记包含 jQuery Js 文件和这个插件的 Js 文件。
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://files.jainaewen.com/files/javascript/jquery/ie-select-style/jquery.ie-select-style.min.js"></script>
Then put the following right after:
然后将以下内容放在后面：
<script type="text/javascript">
$('#test').ieSelectStyle();
</script>
All this should go before the closing </body>tag
所有这些都应该在结束</body>标记之前
Check working example at http://jsfiddle.net/7Vv8u/2/
在http://jsfiddle.net/7Vv8u/2/检查工作示例
回答by BigFatBaby
Styling <select>items is a bit of a problem since there is no cross-browser solution without using JavaScript - since each browser handles rendering of the form controls differently.
样式<select>项目有点问题，因为没有不使用 JavaScript 的跨浏览器解决方案 - 因为每个浏览器处理表单控件的呈现方式不同。
I would suggest using an <ul>element and applying the functionality/design to act more like a <select>element - using JavaScript
我建议使用一个<ul>元素并应用功能/设计来表现得更像一个<select>元素 - 使用 JavaScript
thisarticle may help you with this
这篇文章可能会帮助你
