☰

アウトラインの半径? 質問する

tag-icon • tag-icon html css
アウトラインの半径? 質問する

divのように、要素のアウトラインの角を丸くする方法はありますかborder-radius?

ベストアンサー1

丸みを帯びた入力フィールドがありborder、フォーカス アウトラインの色を変更したいと考えていました。入力コントロールのひどい四角いアウトラインを抑えることができませんでした。

そこで、代わりに を使用しましたbox-shadow。私は実際には影の滑らかな外観を好みましたが、影を硬くして丸いアウトラインをシミュレートすることもできます。

input, input:focus {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
    outline-color: transparent; /* for high contrast modes */
    transition: .1s;
}
/* Smooth outline with box-shadow: */
.text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
}

/* Hard "outline" with box-shadow: */
.text2:focus {
    box-shadow: 0 0 0 2pt red;
}
<input class="text1"> 
<br>
<br>
<input type=text class="text2">

おすすめ記事