Irina

Friendly select

Posted April 28th, 2009 by admin and filed in css, javascript

CSS kode

div#input {
width: 234px;
border: 1px solid #cd0200;
position:relative;
font-size: 11px;
line-height:18px;
padding:0 0 0 4px;
color:#333;
position:relative;
z-index:2;
background: url(”images/dropdown_arrow.gif”) 100% 0px no-repeat;
}

div#selects {
width: 100px;
overflow:auto;
display:none;
position:absolute;
left: -1px;
top: 19px;
background:#fff;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: solid 1px #4e77a1;
border-top: 1px solid #4e77a1;
}

div#selects a {
padding: 0 0 0 4px;
color:#333;
font-size:11px;
text-decoration:none;
display:block;
}
.input_default_cursor {
cursor:default;
}
:focus
{
-moz-outline-style: none;
}

div#selects.shown {
display:block;
width:100px;

}
div#selects.shown a:hover {
cursor:default;
color:#cc0000;
background:#316ac5;
color:#fff;
}
div#selects {
z-index:5;
}

Javascript code

var opening=false;

function hideall() {
if (opening==false)
{
inputdiv=document.getElementById(’selects’);
inputdiv.style.display=”none”;
}
opening=false;
}
function showall(DivId) {
inputdiv=document.getElementById(DivId);

if(inputdiv.style.display==”block”)
{
inputdiv.style.display=”none”;
}
else
{
inputdiv.style.display=”block”;
inputdiv.className=’shown’;
opening=true;
}
}

And the html is:

<div id=”input” class=”input_default_cursor” onclick=”showall(’selects’);”>
Real select:
<div id=”selects”>
<a href=”#a”>Spanish</a>
<a href=”#a”>Portuguese</a>
<a href=”#a”>German</a>
</div>
</div>

And here is the source – http://ivanov.in/mm/pseudo-select.html?05