input Checkboxes

input radio/Checkboxes 選擇框

<label class="container"> <input type="checkbox" checked="checked">One</label><br> <label class="container"> <input type="checkbox">Two</label><br> <label class="container"> <input type="checkbox">Three</label><br> <label class="container"> <input type="checkbox">Four</label><br> <style> .container { cursor: pointer; font-size: 22px; } </style> <pre><<c>label class="container"> <<c>input type="checkbox" checked="checked">One<<c>/label><<c>br> <<c>label class="container"> <<c>input type="checkbox">Two<<c>/label><<c>br> <<c>label class="container"> <<c>input type="checkbox">Three<<c>/label><<c>br> <<c>label class="container"> <<c>input type="checkbox">Four<<c>/label><c><br> <<c>style> .container { cursor: pointer; font-size: 22px; } <<c>/style></pre> <style> input {cursor:pointer;} pre{position:fixed ; top:10px ; left:100px;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style

00

<label class="container" > <input type="checkbox" checked="checked">One</label> <label class="container"> <input type="checkbox" >Two</label> <label class="container"> <input type="checkbox" >Three</label> <label class="container"> <input type="checkbox" >Four</label> <style> .container { cursor: pointer; padding-left: 30px; font-size: 22px; } </style> <pre> <<c>label class="container"> <<c>input type="checkbox" checked="checked">One<<c>/label> <<c>label class="container"> <<c>input type="checkbox" >Two<<c>/label> <<c>label class="container"> <<c>input type="checkbox" >Three<<c>/label> <<c>label class="container"> <<c>input type="checkbox" >Four<<c>/label> <<c>style> .container { cursor: pointer; padding-left: 30px; font-size: 22px; } <<c>/style> </pre> <style> input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style

00

<style> input[type="checkbox"]:checked ~ span{ color: red;} label {cursor:pointer;padding-left: 20px;font-size: 22px;} </style> <label> <input type="checkbox" > <span>One</span></label> <label> <input type="checkbox" > <span>Two</span></label> <label> <input type="checkbox" > <span>Three</span></label> <label> <input type="checkbox" > <span>Four</span></label> <pre> <<c>style> input[type="checkbox"]:checked ~ span{ color: red;} label {cursor:pointer;padding-left: 20px; font-size: 22px;} <<c>/style> <<c>label> <<c>input type="checkbox" > <<c>span>One<<c>/span><<c>/label> <<c>label> <<c>input type="checkbox" > <<c>span>Two<<c>/span><<c>/label> <<c>label> <<c>input type="checkbox" > <<c>span>Three<<c>/span><<c>/label> <<c>label> <<c>input type="checkbox" > <<c>span>Four<<c>/span><<c>/label></pre> <style> input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style

00

<style> .container { display: block; /* 垂直 */ position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; } .container input { position: absolute; opacity: 0; cursor: pointer; } .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } .container:hover input ~ .checkmark { background-color: #ccc;} .container input:checked ~ .checkmark { background-color: #2196F3;} .checkmark:after { content: ""; position: absolute; display: none; } .container input:checked ~ .checkmark:after { display: block; } .container .checkmark: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> <label class="container">One <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> <label class="container">Two <input type="checkbox"> <span class="checkmark"></span> </label> <label class="container">Three <input type="checkbox"> <span class="checkmark"></span> </label> <label class="container">Four <input type="checkbox"> <span class="checkmark"></span> </label>

00

<style> .container { position: relative; /* 橫向 */ margin-right: 30px; /* 橫向 */ padding-left: 35px; /* 選擇框 字距 */ cursor: pointer; /* 滑鼠游標手型 */ font-size: 22px; } /* 字 大小 */ .container input { position: absolute; /* 隱藏原有選擇框 */ opacity: 0; cursor: pointer; } .checkmark { position: absolute; /* 自加選擇框 */ top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } .container:hover input ~ .checkmark{background-color: #ccc;} /*滑鼠改色*/ .container input:checked ~ .checkmark{ background-color: #2196F3;}/*選擇後色*/ .checkmark:after { content: ""; position: absolute; display: none; } .container input:checked ~ .checkmark:after { display: block; } .container .checkmark: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> <label class="container">One <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> <label class="container">Two <input type="checkbox"> <span class="checkmark"></span> </label> <label class="container">Three <input type="checkbox"> <span class="checkmark"></span> </label> <label class="container">Four <input type="checkbox"> <span class="checkmark"></span> </label>

00

Edit

#html #網頁格式 #script #style #div #html input Checkboxes #html 選擇框