/*
* @CSS3 Selectbox
* @author Martin Ivanov
* @website http://wemakesitesnet
* @blog http://acidmartin.wordpress.com
* @twitter https://twitter.com/#!/wemakesitesnet
**/
:root .css3-selectbox,
:root .css3-selectbox select,
:root .css3-selectbox::after,
:root .css3-selectbox::before
{
display: inline-block;
vertical-align: top;
height: 18px;
}
:root .css3-selectbox::after,
:root .css3-selectbox::before
{
content: "";
-moz-pointer-events: none;
-webkit-pointer-events: none;
pointer-events: none;
}
:root .css3-selectbox,
:root .css3-selectbox::after
{
background: #757575;
background: -moz-linear-gradient(#757575, #626262);
background: -webkit-linear-gradient(#757575, #626262);
background: -ms-linear-gradient(#757575, #626262);
background: -o-linear-gradient(#757575, #626262);
background: linear-gradient(#757575, #626262);
}
:root .css3-selectbox select
{
margin: 0;
padding: 0;
border: 0;
background: transparent;
font: normal 11px/18px "Segoe UI", Arial, Sans-serif;
color: #fff;
outline: none;
}
:root .css3-selectbox option
{
background: #535353;
}
:root .css3-selectbox
{
border: solid 1px #303030;
overflow: hidden;
cursor: pointer;
border-radius: 3px;
position: relative;
box-shadow: 0 0 0 1px #6a6a6a, 0 0 0 1px #919191 inset;
}
:root .css3-selectbox::before
{
position: absolute;
z-index: 1;
top: 8px;
right: 4px;
width: 0;
height: 0;
border: solid 4px transparent;
border-top-color: rgba(255, 255, 255, .6);
}
:root .css3-selectbox::after
{
position: relative;
left: 1px;
width: 16px;
margin: 0 0 0 -17px;
box-shadow: -1px 0 0 1px #919191 inset;
}
:root .css3-selectbox:hover::before
{
border-top-color: #fff;
}
<div class="demo-toolbar">
<ul>
<li>
<label><span>select client-side language</span><span class="css3-selectbox"><select>
<option value="JavaScript">JavaScript</option>
<option value="CSS">CSS</option>
<option value="HTML">HTML</option>
</select></span></label>
</li><li>
<label><span>select server-side language</span><span class="css3-selectbox"><select>
<option value="PHP">PHP</option>
<option value="Java">Java</option>
<option value=".NET">.NET</option>
</select></span></label>
</li>
</ul>
</div>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.