【CSS】チェックボックスとラジオボタンのスタイル指定(ボタンの後ろにテキスト & テキストなし)
チェックボックスとラジオボタンのスタイル指定で、ボタンの後ろにテキストが入るパターンとテキストが入らないパターン。
html
<h1>ラジオボタン</h1> <div id="redioBox"> <label class="radio_text"> <input name="radioTest" value="1" type="radio">ラジオボタン1 </label> <label class="radio_text"> <input name="radioTest" value="2" type="radio">ラジオボタン2 </label> <label class="radio_text inactive"> <input name="radioTest" value="3" type="radio" disabled>ラジオボタン3 </label> <h2>テキストなし</h2> <label class="radio"> <input type="radio" name="radioTest2" value="1"> </label> <label class="radio"> <input type="radio" name="radioTest2" value="2"> </label> </div> <h1>チェックボックス</h1> <div id="checkBox"> <label class="checkbox_text"> <input name="checkTest" value="1" type="checkbox">チェックボックス1 </label> <label class="checkbox_text"> <input name="checkTest2" value="2" type="checkbox">チェックボックス2 </label> <label class="checkbox_text inactive"> <input name="checkTest3" value="3" type="checkbox" disabled>チェックボックス3 </label> <h2>テキストなし</h2> <label class="checkbox"> <input type="checkbox" name="checkTest4" value="4"> </label> <label class="checkbox"> <input type="checkbox" name="checkTest5" value="5"> </label> </div>
scss
h1 { margin: 0; padding: 20px 0 10px 0; font-size: 16px; } h2 { margin: 0; padding: 20px 0 10px 0; font-size: 14px; } #redioBox, #checkBox { padding: 0 20px; } // ラジオボタン(テキストあり) label.radio_text { cursor: pointer; position: relative; overflow: hidden; padding-left: 20px; margin-right:20px; display: inline-block; font-size: 16px; &.inactive { color: #ccc; } &:before { position: absolute; width: 14px; height: 14px; border: 1px solid #ccc; border-radius: 50%; left: 0; top: 0px; content: ''; z-index: 3; } &:after { content: ''; position : absolute; width: 10px; height: 10px; border-radius: 100%; left: 3px; top: 3px; background-color: #068d39; z-index: 1; } input[type="radio"] { -moz-appearance: none; -webkit-appearance: none; position: absolute; z-index: 2; width: 19px; height: 15px; left: -19px; top: 0px; margin: 0; box-shadow: 18px -1px #FFF; border-radius:9px; &:checked { box-shadow: none; } &:focus { opacity: 0.2; box-shadow: 16px -1px #FFF; } } } // ラジオボタン(テキストなし) /*Radioのみ*/ label.radio { position: relative; display: inline-block; width: 14px; height: 14px; border: 1px solid #ccc; border-radius: 100%; overflow: hidden; cursor: pointer; &:before { content: ''; display: block; width: 10px; height: 10px; border-radius: 100%; position: absolute; top: 2px; left: 2px; z-index: 1; background-color: #068d39; } input[type="radio"] { -moz-appearance: none; -webkit-appearance: none; margin: 0px; position: absolute; z-index: 2; top: -2px; left: -23px; width: 20px; height: 20px; display: block; box-shadow: 20px 0px #FFF; &:checked { box-shadow: none; } &:focus { box-shadow: 20px 0px #FFF; opacity: 0.2; } } } // チェックボックス(テキストあり) label.checkbox_text { cursor: pointer; position: relative; padding-left: 25px; margin-right: 20px; overflow: hidden; position: relative; padding-left: 23px; display: inline-block; box-sizing: border-box; font-size: 16px; line-height: 1; &.inactive { color: #ccc; } &:before { content: ''; position: absolute; width: 14px; height: 14px; left: 0; top: 0px; border: 1px solid #ccc; z-index: 3; } &:after { content: ''; position: absolute; top: 7px; left: 6px; display: block; margin-top: -6px; width: 2px; height: 10px; border-right: 3px solid #2e13f5; border-bottom: 3px solid #2e13f5; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); z-index: 1; } input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; position : absolute; top:2px; left: -45px; width: 20px; height: 12px; display: block; box-shadow: 41px 0px #FFF; z-index: 2; margin: 0; padding: 0; &:checked { box-shadow: none; &:focus { box-shadow: 40px 0px #fff; opacity: 0.1; } } &:focus { box-shadow: 41px 0px #fff; } } } // テキストボックス(テキストなし) label.checkbox { cursor: pointer; width: 15px; height: 15px; border: 1px solid #ccc; background: #fff; overflow: hidden; position: relative; display: inline-block; box-sizing: border-box; input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; margin: 0; padding: 0; position: absolute; left: 20px; width: 15px; height: 15px; left: -40px; box-shadow: 39px 0px #FFF; z-index: 2; &:checked { box-shadow: none; &:focus { box-shadow: 39px 0px #fff; opacity: 0.1; } } &:focus { box-shadow: 39px 0px #fff; } } &:after { content: ''; position: absolute; top: 7px; left: 4px; display: block; margin-top: -8px; width: 2px; height: 10px; border-right: 3px solid #2e13f5; border-bottom: 3px solid #2e13f5; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); z-index: 1; } }
コメントを残す