当前位置： 文江博客话题详情

控制选择框的宽度

发布于 2024-09-27 09:59:48 字数 148 浏览 3 评论 0原文

我试图更改 框..主要在 IE 中......

原文

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

世俗缘 2024-10-04 09:59:49
<select width="123" style="width: 123px;">...</select>

似乎是与所有较新的浏览器兼容的解决方案。

<select width="123" style="width: 123px;">...</select>

Seems to be quite compatible solution working with all newer browsers.

回复 原文
南笙 2024-10-04 09:59:49

这可以使用
中的 jQuery 插件来完成
http://www.jainaewen.com/files/javascript/ jquery/ie-select-style/#demo

该插件使用起来非常简单。这是一些完整工作代码的细分。

HTML

<select id="test" >
    <option>choose on</option>
    <option>aaaaaaaaaaaaaaaaaaaaaaa</option>
    <option>bbbbbbbbbbbbbbbbbbbbbbb</option>
    <option>ccccccccccccccccccccccc</option>
    <option>ddddddddddddddddddddddd</option>
</select>

CSS

#test{
    width:100px;
    border:1px solid red;
}

jQuery

不要忘记包含 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>

然后将以下内容放在后面：

<script type="text/javascript">
  $('#test').ieSelectStyle();
</script>

所有这些都应该放在结束 标签之前

检查工作示例 http://jsfiddle.net/7Vv8u/2/

This can be done using the jQuery plugin found at
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.

HTML

<select id="test" >
    <option>choose on</option>
    <option>aaaaaaaaaaaaaaaaaaaaaaa</option>
    <option>bbbbbbbbbbbbbbbbbbbbbbb</option>
    <option>ccccccccccccccccccccccc</option>
    <option>ddddddddddddddddddddddd</option>
</select>

CSS

#test{
    width:100px;
    border:1px solid red;
}

jQuery

Don't forget to include the jQuery Js file and this plugins' Js file.

<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

Check working example at http://jsfiddle.net/7Vv8u/2/

回复 原文
国粹 2024-10-04 09:59:49

样式化

我建议使用

    元素并应用功能/设计以使其更像

这篇文章可能会帮助您

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.

I would suggest using an <ul> element and applying the functionality/design to act more like a <select> element - using JavaScript

this article may help you with this

回复 原文
~没有更多了~

关于作者

站稳脚跟

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

内心激荡

文章 0 评论 0

JSmiles

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

左秋

文章 0 评论 0

迪街小绵羊

文章 0 评论 0

瞳孔里扚悲伤

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文