[英]controlling the width for a select box
i was trying to change the width of a particular optional value under <select>
attribute, something like this . 我试图在<select>
属性下更改特定可选值的宽度,类似这样 。 But i am getting troubled as in IE the select box along with the option value gets expanded. 但我感到困扰,因为在IE中选择框以及选项值得到扩展。 Is there any simple way to make the <option>
only to expand and not the <select>
box.. mainly in IE .... 是否有任何简单的方法使<option>
只扩展而不是<select>
框..主要是在IE ....
<select width="123" style="width: 123px;">...</select>
似乎是与所有较新浏览器兼容的完全兼容的解决方案。
This can be done using the jQuery plugin found at 这可以使用找到的jQuery插件来完成
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/#demo http://www.jainaewen.com/files/javascript/jquery/ie-select-style/#demo
The plugin is very simple to use. 该插件使用起来非常简单。 Here's a breakdown of some full working code. 这是一些完整工作代码的细分。
<select id="test" >
<option>choose on</option>
<option>aaaaaaaaaaaaaaaaaaaaaaa</option>
<option>bbbbbbbbbbbbbbbbbbbbbbb</option>
<option>ccccccccccccccccccccccc</option>
<option>ddddddddddddddddddddddd</option>
</select>
#test{
width:100px;
border:1px solid red;
}
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>
标记之前
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.