css - 如果内容大于图像，如何正确调整 CSS 表单选择字段

Question

我使用以下代码自定义了表单选择字段的外观和字段:

.formbox select { width:240px; border:0; padding:11px 15px; font:normal 12px Arial, Helvetica, sans-serif; color:#000; margin-top:5px; background: url(../images/search_bg.gif) left top no-repeat; }

该字段运行良好，除非我选择的字段中的内容宽度超过 240 像素。

如果我删除宽度字段，下拉菜单没问题，但我实际的选择按钮位于字段背景的右侧。

如果我改变宽度，我的宽度图像会变形和/或不够长，因此看起来很俗气。

是否可以让选择字段本身处于一个宽度而任何下拉内容处于另一个宽度？

编辑

我找到了这个链接:Dropdownlist width in IE但我根本不想使用 JS。

Answer 1

您将无法跨浏览器执行此操作。一些浏览器允许对选择元素进行有限的自定义，但通常不值得为此付出努力。

如果您真的需要自定义外观，那么我建议您使用完整的 javascript 解决方案。