CSS / HTML - 正确设置选择框的样式 [英] CSS / HTML - Styling select boxes properly

问题描述

我很新，正在做自己的CSS更改，而且我有点卡住选择元素。
到目前为止，我已经在哪里使用了以下CSS：

$ p $ select {
float：剩下;
border：0无;
height：46px;
width：240px;
背景颜色：＃191919;
font-size：14px;
颜色：白色;
}


唯一的问题是，现在我正在看到某种渐变，而我似乎无法在CSS中找到任何东西来摆脱它。

以下是我所看到的

http://i39.tinypic.com/20797ki.png

解决方案

您必须使用Javascript来选择，复选框，单选按钮样式。

有一个库fancyform（需要jQuery），你可以使用，它可以转换上面的项目，几乎完全支持textarea有一个自定义滚动条。 http://lutrasoft.nl/jQuery/fancyform/
在源代码中你可以得到最新版本。它很容易使用：

HTML：

 <选择class =select> 
< option>选项1< / option> 
< option>选项2< / option> 
< / select> 
  

Javascript：

  $（function（）{
 $（。select）。transformSelect（）; 
}）; 
  

CSS（需要编辑）

  .transformSelect li 
 {
 
 position：relative; 
 
} 
 
 .transformSelect li span 
 {
 cursor：pointer; 
 padding：3px; 
 border：1px solid #cccccc; 
 width：154px; 
 line-height：15px; 
 height：15px; 
 display：block; 
} 
 
 .transformSelect li span：hover 
 {
 background：#eeeeee; 
} 
 
 .transformSelect li ul 
 {
 position：absolute; 
剩下：0; 
 top：22px; 
 border：1px solid #cccccc; 
 width：160px; 
背景：#ffffff; 
} 
 .transformSelect li ul li span 
 {
 border：0; 
光标：指针; 
} 
 .transformSelect li ul li span：hover 
 {
 background：#cccccc; 
} 
  

该脚本将生成以下内容：

 < ul> 
< li>< span>选项1< / span> 
< ul> 
< li>< span>选项1< / span>< / li> 
< li>< span>选项2< / span>< / li> 
< / ul> 
< / li> 
< / ul> 
  

您不必拥有 UL LI



有关更多设置，您需要检查脚本的来源。

I'm pretty new doing my own CSS changes and I am a little stuck on the select element. So far, I have it where I want using the following CSS:

select {
    float: left;
    border: 0 none;
    height: 46px;
    width: 240px;
    background-color: #191919;
    font-size: 14px;
    color: white;
}

The only problem, is now I'm seeing some sort of gradient and I can't seem to find anything in the CSS to get rid of it.

Below is what I'm seeing

http://i39.tinypic.com/20797ki.png

解决方案

You have to use Javascript to style Select, Checkbox, Radio buttons.

There is a library fancyform (required jQuery) which you can use, it can transform above items and almost fully supports textarea to have a custom scrollbar. http://lutrasoft.nl/jQuery/fancyform/ Within the source you can get the latest version. It is really easy to use:

HTML:

<select class="select">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Javascript:

$(function(){
    $(".select").transformSelect();
});

CSS (which you need to edit)

.transformSelect li
{

    position    : relative;

}

    .transformSelect li span
    {
        cursor  : pointer;  
        padding     : 3px;
        border      : 1px solid #cccccc;
        width       : 154px;            
        line-height : 15px; 
        height      : 15px;
        display     : block;
    }

        .transformSelect li span:hover
        {
            background  : #eeeeee;
        }

    .transformSelect li ul
    {
        position    : absolute;
        left        : 0;    
        top         : 22px;
        border      : 1px solid #cccccc;
        width       : 160px;
        background  : #ffffff;
    }
        .transformSelect li ul li span
        {
            border  : 0;    
            cursor  : pointer;
        }
            .transformSelect li ul li span:hover
            {
                background  : #cccccc;  
            }

The script will generate the following:

<ul>
    <li><span>Option 1</span>
        <ul>
            <li><span>Option 1</span></li>
            <li><span>Option 2</span></li>
        </ul>
    </li>
</ul>

You don't have to have your UL LI within your source code, it will be generated by the script (also supports OPTGROUP). It does have some options to show the first item or hide it, have an input with the dropdown to also have custom input, etc.

For more settings you need to check the source of the script.

这篇关于CSS / HTML - 正确设置选择框的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！