古いWebブラウザで border-radius プロパティが利用できない場合は、テキストボックスの枠や背景を画像で表現する方法で角丸のテキストボックスを表現できます。
画像で角丸テキストボックスを表現する方法についてはこちらの記事を参照してください。
.RoundedCornerTextBox {
padding: 0.4rem 0.4rem 0.4rem 0.4rem;
border-radius:0.5rem;
border:2px solid #606060;
}
.RoundedCornerTextBox:focus {
outline:none;
border: 2px solid #3e83ff;
}
.RoundedTextBox {
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
border-radius: 2.0rem;
border: 2px solid #606060;
}
.RoundedTextBox:focus {
outline: none;
border: 2px solid #eb0082;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="rounded-textbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form action="" method="post">
<input class="RoundedCornerTextBox" id="inputBox" type="text" />
<input class="RoundedTextBox" id="inputBox" type="text" />
</form>
</body>
</html>
.RoundedCornerTextBox {
padding: 0.4rem 0.4rem 0.4rem 0.4rem;
border-radius:0.5rem;
border:2px solid #606060;
}
.RoundedCornerTextBox:focus {
outline:none;
border: 2px solid #3e83ff;
}
.RoundedTextBox {
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
border-radius: 2.0rem;
border: 2px solid #606060;
}
.RoundedTextBox:focus {
outline: none;
border: 2px solid #eb0082;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="rounded-textbox-outline.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form action="" method="post">
<input class="RoundedCornerTextBox" id="inputBox" type="text" />
<input class="RoundedTextBox" id="inputBox" type="text" />
</form>
</body>
</html>
.RoundedCornerTextBox {
padding: 0.4rem 0.4rem 0.4rem 0.4rem;
border-radius:0.5rem;
border:none;
outline: 2px solid #C0C0C0;
}
.RoundedCornerTextBox:focus {
border: none;
outline: 2px solid #9ec1ff;
}
.RoundedTextBox {
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
border-radius: 2.0rem;
border: none;
outline: 2px solid #C0C0C0;
}
.RoundedTextBox:focus {
border: none;
outline: 2px solid #ffd86c;
}
border-radius
プロパティを設定したうえで、bodrder:none
を設定し、borderを非表示にし、
outline
プロパティを設定して外周の線を描画すると、角丸のoutlineが描画できます。