input radio Checkboxes

input radio/Checkboxes 選擇框

<font size=5> Checkbox 對像代表一個 HTML 表單中的 一個選擇框。<br><br> <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> </font>

00

<style> input[type="checkbox"]:checked ~ span { color: red;} label {cursor:pointer} </style> <font size=5><pre> style input[type="checkbox"]:checked ~ span { color: red;} 選擇後紅字。 label {cursor:pointer} 滑鼠游標手型 </pre> <label> <input type="checkbox" name="my-checkbox" > <span>One</span></label><br> <label> <input type="checkbox" name="my-checkbox" "> <span>Two</span></label><br> <label> <input type="checkbox" name="my-checkbox" > <span>Three</span></label><br> <label> <input type="checkbox" name="my-checkbox" > <span>Four</span></label><br> </font>

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

<font size=5> input radio Cannot cancel after selection 選擇後無法取消。<br><br> <label class="container"> <input type="radio" checked="checked">One</label><br> <label class="container"> <input type="radio" >Two</label><br> <label class="container"> <input type="radio" >Three</label><br> <label class="container"> <input type="radio" >Four</label><br> </font>

00

<font size=5> radio button name 單選按鈕名稱，一次選擇一個項目，若要可以選擇多個項目，可以使用 Checkboxes。<br><br> <label class="container"> <input type="radio" name="S1" checked="checked">One</label><br> <label class="container"> <input type="radio" name="S1" >Two</label><br> <label class="container"> <input type="radio" name="S1" >Three</label><br> <label class="container"> <input type="radio" name="S1" >Four</label> </font>

00

<style> .container { position: relative; padding-left: 25px; cursor: pointer; font-size: 22px; } .container input { opacity: 0; cursor: pointer;} .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #C0C0C0; border-radius: 50%;} .container:hover input ~ .checkmark { background-color: #808080; } .container input:checked ~ .checkmark { background-color: #2196F3; } .checkmark:after { content: ""; position: absolute; display: none } .container input:checked ~ .checkmark:after { display: block; } .container .checkmark:after { top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white;} </style> <label class="container">One <input type="radio" checked="checked" name="radio"> <span class="checkmark"></span> </label> <label class="container">Two <input type="radio" name="radio"> <span class="checkmark"></span> </label> <label class="container">Three <input type="radio" name="radio"> <span class="checkmark"></span> </label> <label class="container">Four <input type="radio" name="radio"> <span class="checkmark"></span> </label>

00

#html input radio Checkboxes #html input radio #html input Checkboxes #html 選擇框