JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<!-- アウトラインのいろ -->
<input type="text" value="フォーカスすると枠色がオレンジになるよ">
<br>
<br>
<!-- selectの高さ -->
<select name="" id="select01">
    <option value="list01">opt01</option>
    <option value="list02">opt02</option>
    <option value="list03">opt03</option>
    <option value="list04">opt04</option>
</select>

CSS

/* アウトラインの色 */
input,
input:focus {
     width: 80%;
    outline-color: orange;

}

/* selectの高さ 例1
    メディアクエリの指定により、webkitつまり、chromeやsafariで
    のみに適用。IEやfirefoxはpaddingやheightの指定が可能なので、そのままCSSを指定。
*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    
    #select01 { 
        -webkit-appearance: menulist-button;
        border-color: pink;/* ボーダーが黒になるので適当な色を指定 */
        /* それでもpaddingは使用できないので高さのみを適用 */
        height: 50px;
        
    } 
}

/* IEやFirefoxはそのままCSSが適用される */
#select01 {
    padding: 10px 0;
}