CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用してカスタムチェックボックスとラジオボタンを作成するにはどうすればよいですか？

以下は、ログインフォームを含むレスポンシブナビゲーションメニューを作成するためのコードです-

例

<!DOCTYPE html>
<html>
<style>
.checkboxContainer {
   display: block;
   position: relative;
   padding-left: 35px;
   margin-bottom: 12px;
   cursor: pointer;
   font-size: 22px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
.checkboxContainer input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
   height: 0;
   width: 0;
}
.checkboxMarked {
   position: absolute;
   top: 0;
   left: 0;
   height: 25px;
   width: 25px;
   background-color: #eee;
}
.checkboxContainer:hover input ~ .checkboxMarked {
   background-color: rgb(205, 255, 199);
}
.checkboxContainer input:checked ~ .checkboxMarked {
   background-color: rgb(5, 170, 32);
}
.checkboxMarked:after {
   content: "";
   position: absolute;
   display: none;
}
.checkboxContainer input:checked ~ .checkboxMarked:after {
   display: block;
}
.checkboxContainer .checkboxMarked:after {
   left: 9px;
   top: 5px;
   width: 5px;
   height: 10px;
   border: solid white;
   border-width: 0 3px 3px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}
</style>
<body>
<h1>Custom Checkbox Example</h1>
<label class="checkboxContainer">Rice
   <input type="checkbox" checked="checked">
   <span class="checkboxMarked"></span>
</label>
<label class="checkboxContainer">Flour
   <input type="checkbox">
   <span class="checkboxMarked"></span>
</label>
</body>
</html>

出力

これにより、次の出力が生成されます-

CSSを使用してカスタムチェックボックスとラジオボタンを作成するにはどうすればよいですか？


  1. CSSとJavaScriptで拡張グリッドを作成するにはどうすればよいですか？

    CSSとJavaScriptを使用して拡張グリッドを作成するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       padding: 1%;       font-family: "

  2. CSSの外観プロパティを持つカスタムラジオボタン

    外観プロパティを使用して、ユーザーのオペレーティングシステムのプラットフォームネイティブスタイルに従って要素のスタイルを設定します。 構文 CSSの外観プロパティの構文は次のとおりです- Selector {    appearance: /*value*/;    -webkit-appearance: /*value*/; /*for Safari and Chrome */    -moz-appearance: /*value*/; /*for Firefox */ } 例 次の例は、CSSの外観プロパティを示しています。