为跨浏览器功能设置选择菜单的正确方式 [英] The correct way of styling a select menu for cross browser functionality

问题描述

我遇到这个问题，一个选择菜单，它的样式它的帮助CSS& Jquery。现在，我设法得到这个结果，我真的很喜欢它：

到现在，它在mozila，opera，chrome，IE7 +中都能正常工作。

目前有：

HTML：

 < select class =styledname => 
< option>选择标题< / option> 
< option>先生< / option> 
< option>太太< / option> 
< option>小姐。< / option> 
< / select> 
  

CSS：

 code> select {
 border：1px solid＃d6d8db; 
 background-color：#ecedee; 
 text-transform：uppercase; 
 color：＃47515c; 
 padding：12px 10px 12px 10px; 
 width：auto; 
 cursor：pointer; 
 margin-bottom：10px; 
} 
 select>选项{
 text-transform：uppercase; 
 padding：5px 0px; 
} 
 .customSelect {
 border：1px solid＃d6d8db; 
 background-color：#ecedee; 
 text-transform：uppercase; 
 color：＃47515c; 
 padding：12px 10px 12px 10px; 
 margin-bottom：10px; 
} 
 .customSelect.changed {
 background-color：＃f0dea4; 
} 
 .customSelectInner {
 background：url（../ images / select_arrows.png）no-repeat center right; 
} 
  

jQuery由两部分组成：
- 插件
- 和控制代码

这可以在我刚刚创建的FIDDLE中查看：

Probebly最重要的是，正在寻找跨浏览器解决方案。

>

解决方案

跨浏览器功能的选择菜单样式的正确方式

放弃，没有跨浏览器的样式选择和选项元素的方式。您需要使用自己的基于HTML的控件替换它们。

但是，如果您想坚持（并且可能放弃旧版浏览器），以下链接可能有助于：

• 如何设置< select>


• 样式或替换标准选择元素。

I came across this problem with a select menu, it's about styling it with the help of CSS & Jquery. By now, I managed to get this result, which I really like it:

till now it works perfect in mozila, opera, chrome, IE7+.

This is the source which i have at the moment:

HTML:

            <select class="styled" name="">
                <option>Select title</option>
                <option>Mr.</option>
                <option>Mrs.</option>
                <option>Miss.</option>
            </select>

CSS:

select {
    border: 1px solid #d6d8db;
    background-color: #ecedee;
    text-transform: uppercase;
    color: #47515c;
    padding: 12px 10px 12px 10px;
    width: auto;
    cursor: pointer;
    margin-bottom: 10px;
}
select > option {
    text-transform: uppercase;
    padding: 5px 0px;
}
.customSelect {
    border: 1px solid #d6d8db;
    background-color: #ecedee;
    text-transform: uppercase;
    color: #47515c;
    padding: 12px 10px 12px 10px;
    margin-bottom: 10px;
}
.customSelect.changed {
    background-color: #f0dea4;
}   
.customSelectInner {
    background:url(../images/select_arrows.png) no-repeat center right;
}

The jQuery is composed from two parts: - the plugin - and the control code

This can be viewd in the FIDDLE that i just created: http://jsfiddle.net/s6jGW/1/

Please note there is "External Resources" on the left.

What I want to achieve

1. The drop down I want to style it so that it will look approximately like in the image (I mean those options like - height - padding - on hover:

2. I don't want the "SELECT TITLE" to be as a selection option, it must be only the title of the select box. in this fiddle you can see the it is as a option too. http://jsfiddle.net/s6jGW/1/

3. Probebly most important, I AM LOOKING FOR CROSS BROWSER SOLUTION.

Thank you in advance

解决方案

The correct way of styling a select menu for cross browser functionality

Give up, there is no cross-browser way to style select and option elements. You'll need to replace them with your own, HTML-based controls.

But, if you want to insist (and probably give up on older browsers), the following links might help:

• How to style a <select> dropdown with CSS only without JavaScript?
• Styling or Replacing the Standard Select Element.

这篇关于为跨浏览器功能设置选择菜单的正确方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！