English 中文(简体)
如何通过特别安全局对选定要素进行定制,以实现这种黑暗的风格?
原标题:How to customize a select element through CSS to achieve this dark style?
  • 时间:2012-04-17 05:45:02
  •  标签:
  • html
  • css

我怎么能产生像以下形象这样的某些因素?

“entergraph

我的法典

<select>
    <option>-- Select City --</optoin>
    <option>Delhi</option>
    <option>Gurgaon</option>
</select>

这一点可在“ j”中查阅,但我想使用纯中央支助事务。

最佳回答

这里是CSS赋予权力的选定菜单。

label.custom-select {
    position: relative;
    display: inline-block;

}

.custom-select select {
    display: inline-block;
    padding: 4px 3px 3px 5px;
    margin: 0;
    font: inherit;
    outline:none; /* remove focus ring from Webkit */
    line-height: 1.2;
    background: #000;
    color:white;
    border:0;
}

/* Select arrow styling */
.custom-select:after {
    content: "▼";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 60%;
    line-height: 30px;
    padding: 0 7px;
    background: #000;
    color: white;
    pointer-events: none;
}

.no-pointer-events .custom-select:after {
    content: none;
}
<label class="custom-select">
    <select>
        <option>Sushi</option>
        <option>Blue cheese with crackers</option>
        <option>Steak</option>
        <option>Other</option>
    </select>
</label>

JSFiddle

问题回答

采用<代码>点名-秒:无; 它将让你通过arrow子点击,并将启动选定的领域,因此,安保部希望把这个内容放在一边。

.custom-select:after {
    content: "▼";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 60%;
    line-height: 30px;
    padding: 0 7px;
    background: #000;
    color: white;
    pointer-events:none;
}
option{
  background-image:url(image.png);
  background-repeat: no-repeat;
}

各位看不到 Java字,就看不出选人。

可在,你可以定制彩色、dding子和边界,但并非按纽特。





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签