Menu thingy 0001

by Ifnak

HTML

<div id="box1">
    <div id="tools">
        <ul>
            <li id="color_picker">
                <div id="clr_show">
                    <span id="clr_show_h"></span>
                </div>
                <input type="text" id="ptr_c_v" value="#aaaaaa"></input>
            </li>
            <li>
                <label for="ptr_w">Size</label>
                <input type="range" min="0.1" max="100.0" id="ptr_w" step="0.1" value="10.0"></input>
                <input type="text" id="ptr_w_v" value="10.0"></input>
            </li>
            <li>
                <select id="ptr_t">
                    <option value="circle" selected="true">Circle</option>
                    <option value="square">Square</option>
                </select>
            </li>
        </ul>
    </div>
</div>

CSS

* {
    padding:0;
    margin :0;
    color: #489721;
    font: 10px Arial;
}
label, button, option, select,
input[type=range],
input[type=checkbox],
input[type=radio]
{
    cursor: pointer;
}
input[type=text] {
    cursor:text;
}

#tools ul {
    list-style   : none;
    margin       : 5px;
}
#tools li {
    /*border       : 1px dashed red;*/
    display      : inline-block;
}
#tools * {
    font            : 11px Arial;
    vertical-align  : middle;
    padding: 0 2px;
}
#tools input, #tools div {
    border          : 1px solid gray;
}

#clr_show {
    display      : inline-block;
    height       : 16px;
    border-radius: 3px;
    cursor       : pointer;
}
#clr_show_h {
    background-color: #852;
    display         : inline-block;
    height          : 10px;
    width           : 40px;
    margin          : 3px 5px;
    border-radius: 2px;
    vertical-align: middle;
}
#ptr_c_v {
    width           : 52px;
    text-align      : center;
    font            : 11px Arial;
}
#ptr_w_v {
    width: 52px;
    text-align: right;
}
#tools input[type=range] {
    vertical-align: middle;
    -webkit-appearance: none;
    height: 6px;
}
#tools input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #444;
    width: 10px;
    height: 16px;
}