JSFiddle - React, Tailwind, and code Playground
HTML
<div class="group">
<input type="file" />
</div>
<div class="group">
<input type="checkbox" />
</div>
<div class="group">
<input type="text" value="foo" />
</div>
<div class="group">
<select>
<option selected>Pick a number</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="group">
<progress value="10" max="50" />
</div>
<div class="group">
<input type="range" min="0" max="100" value="50" />
</div>
<div class="group">
<input type="password" />
</div>
CSS
::-ms-browse {
border: 1px solid grey;
border-radius: 5px;
color: red;
}
::-ms-check {
border: 1px solid grey;
border-radius: 5px;
color: red;
}
::-ms-clear {
border: 1px solid grey;
color: red;
border-radius: 5px;
}
::-ms-expand {
border: 1px solid grey;
color: red;
border-radius: 5px;
}
::-ms-fill {
color: red;
}
::-ms-fill-lower {
background-color: red;
}
::-ms-fill-upper {
color: red;
}
::-ms-thumb {
background-color: blue;
}
::-ms-ticks-after {
background-color: silver;
display: block;
}
::-ms-ticks-before {
background-color: blue;
display: block;
}
::-ms-tooltip {
/* only display and visibility */
}
::-ms-track {
background-color: green;
}
::-ms-reveal {
color: red;
}
::-ms-value {
font-size: 16px;
}
.group {
border: 1px dotted grey;
}
}