<select> tag as a wheel spinner

@Kevin2Jul 10.2016 — #As you have probably already found out, <select> and its <option> children accept very little styling. Therefore it's probably not going to be your best choice of inputs. Something I'm confused about is your choice of an iframe for display. Anyway, see if the following is anywhere close to what you want:

[code=html]<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>spin box</title>
 <style>
 ul {
 list-style-type: none;
 width: 110px;
 height: 90px;
 overflow-y: auto;
 overflow-x: hidden;
 }
 li {
 border: 1px solid #000;
 margin-top: -1px;
 }
 li:first-of-type {
 margin-top: 0;
 }
 li label {
 display: block;
 cursor: pointer;
 line-height: 1.5em;
 padding-left: 3px;
 background-color: #c0c0c0;
 }
 input[name=spinner] {
 display: none;
 }
 input[name=spinner]:checked ~ label {
 background-color: #fff;
 }
 </style>
 </head>
 <body>
 <form action="#">
 Choose your favorite color:
 <ul>
 <li><input type="radio" name="spinner" id="green" value="green"><label for="green">Green</label></li>
 <li><input type="radio" name="spinner" id="blue" value="blue"><label for="blue">Blue</label></li>
 <li><input type="radio" name="spinner" id="yellow" value="yellow"><label for="yellow">Yellow</label></li>
 <li><input type="radio" name="spinner" id="red" value="red"><label for="red">Red</label></li>
 <li><input type="radio" name="spinner" id="purple" value="purple"><label for="purple">Purple</label></li>
 <li><input type="radio" name="spinner" id="silver" value="silver"><label for="silver">Silver</label></li>
 <li><input type="radio" name="spinner" id="black" value="black"><label for="black">Black</label></li>
 <li><input type="radio" name="spinner" id="gray" value="gray"><label for="gray">Gray</label></li>
 </ul>
 
 <input type="submit" value="Submit">
 </form>
 </body>
 </html>[/code]

<select> tag as a wheel spinner

2 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

<select> tag as a wheel spinner

2 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #HTML _↴