JSFiddle - React, Tailwind, and code Playground

by honglonglong

HTML

<select name="foo">
    <option>one one one one one one one one one one one one one one one one one</option>
    <option>two two two two two two two two two two two two two two two two two two two two two</option>
    <option>three three three three three three three three three three three three three three three three three three three three three three three three</option>
</select>
<input type="checkbox" value="test" id="testcb" disabled="disabled" checked="checked">test</input>
<input type="button" value="Submit" />

CSS

select, option {
    width:30px;
}
select:disabled {
    border: 1px solid black;
}
input[type=button],input[type=submit] {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.16, #F60), color-stop(0.79, rgb(252, 252, 252)));
    background-image: -moz-linear-gradient(center bottom, #F60 16%, #FC6 79%);
    border: 1px solid #db7c00;
    padding-top: 3px;
    padding-right: 15px;
    padding-bottom: 3px;
    padding-left: 15px;
}
input[type=button]:hover,input[type=submit]:hover {
    background-image: -moz-linear-gradient(center bottom, #FC6 16%, #F90 79%);
}
input[type=button]:active,input[type=submit]:active {
    color: #db7c00;
}