Display Select box in a column
I am trying to display select box values in 4 columns. How can i do this. I am going to use it on local server.
I have got images to show you what i am trying to do.
this is what i have got just now.
1 http://www.thewebdesign.org/1a.png
I am trying to turn into
2 http://www.thewebdesign.org/2a.png
this is the code i am using
<style type="text/css">
<!--
.myselectbox {
font-family: Tahoma;
font-size: 18px;
background-colo开发者_StackOverflow社区r: #F5F5F5;
}
option {
font-family: Tahoma;
font-size: 18px;
background-color: #fef5e6;
padding:8px;
margin:5px;
border-top: 1px solid #ebdac0;
border-bottom: 1px solid #ebdac0;
border-right: 1px solid #d6bb86;
border-left: 1px solid #d6bb86;
}
-->
</style>
</head>
<body>
<center>
<select name="amount_no1" class="myselectbox" id="amount_no1" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</center>
</body>
That is not possible. You'll have to use javascript to customize the select box. Here are a list of jQuery plugins you can browse through:
jQuery SelectBox Plugins
If that is the standart select element (not some kind of a plugin), I'm afraid it is not possible.
JS code:
document.getElementById("amount_no1").value = 4
Here is a quick attempt to modify your code. Not optimal, but I ran out of time
<style type="text/css">
.myselectbox {
font-family: Tahoma;
font-size: 18px;
background-color: #F5F5F5;
}
ul {
float: left;
width: 12em;
margin: 0;
padding: 0;
list-style: none;
}
li {
float: left;
width: 6em;
font-family: Tahoma;
font-size: 18px;
background-color: #fef5e6;
padding:8px;
margin:5px;
border-top: 1px solid #ebdac0;
border-bottom: 1px solid #ebdac0;
border-right: 1px solid #d6bb86;
border-left: 1px solid #d6bb86;
}
</style>
</head>
<body>
<div>
<select name="amount_no1" class="myselectbox" id="amount_no1" onclick="document.getElementById('ul1').style.display='block'">
<option value="1">1</option>
</select>
<ul id="ul1" style="display:none">
<li onclick="document.getElementById('amount_no1').options[0].text = 2;
document.getElementById('ul1').style.display='none'">2</li>
<li value="3">3</li>
<li value="4">4</li>
<li value="5">5</li>
<li value="6">6</li>
<li value="7">7</li>
<li value="8">8</li>
</ul>
</div>
</body>
I use this plugin (http://www.marghoobsuleman.com/jquery-image-dropdown) for styled dropdown boxes, because it is not possible to style the standart dropdown box. The plugin contains a css file where you can specify your own styles if you want.
加载中,请稍侯......
精彩评论