ホームページ > 記事 > ウェブフロントエンド > チェックボックスのスタイルをカスタマイズするにはどうすればよいですか?付属コード
チェックボックスのスタイルをカスタマイズするにはどうすればよいですか?付属コード
- 云罗郡主転載
- 2018-10-11 16:35:543150ブラウズ
この記事の内容は、チェックボックスのスタイルをカスタマイズする方法についてです。コードを添付しますので、困っている方は参考にしていただければ幸いです。
ネイティブのチェックボックスのスタイルを変更します。
効果
原則
1. CSS3 属性の外観を使用します。
この属性は (強制的に) デフォルト (ネイティブ) スタイルを変更します。
Firefox は代替の -moz-Appearance 属性をサポートしますが、Safari と Chrome は代替の -webkit-Appearance 属性をサポートします。IE はこの属性をサポートしません。
したがって、この属性を使用して、チェックボックスのネイティブ スタイルをキャンセルできます。
2. Use:checked selector
チェックボックスが選択されているときにスタイルを変更します。
3. :after セレクターのコンテンツ属性
:after セレクターは要素の後にコンテンツを挿入します。
次に、text-aligen と line-height を使用してコンテンツを中央に配置できます。
ソースコード
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>checkbox</title>
<style>
input {
width: 16px;
height: 16px;
margin-top: 0;
background-color: #fff;
border: 1px solid #c9c9c9;
border-radius: 2px;
color: #fff;
text-align: center;
line-height: 15px;
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
-o-appearance:none;
appearance:none;
outline: none;
}
input:hover {
border-color: #43adea;
}
input:checked {
color: #fff;
background-color: #43adea;
border: 1px solid #43adea;
}
input:after {
content: "✔";
}
</style></head><body>
<input type="checkbox">
<input type="checkbox"></body></html>上記はチェックボックスのスタイルをカスタマイズする方法です。コードの完全な紹介が添付されています。CSS3 ビデオ チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。
以上がチェックボックスのスタイルをカスタマイズするにはどうすればよいですか?付属コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。