Venky559 Venky559 - 1 month ago 5
CSS Question

how to add styles to input radio element inside label is it possible?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="radio-toolbar">
<label for="mylabel-1"><input type="radio" id="mybutton-1" checked>All</label>
<label for="mylabel-2"><input type="radio" id="mybutton-2" >Open</label>
<label for="mylabel-2"><input type="radio" id="mybutton-3" >Archived</label>
</div>
</body>
</html>


i want add css styles to input radio button inside label,i don't want to add css to outside label **
**is it possible?

Answer

Here is an example:

label input[type=radio]{ display:none; }

Further more ,you need to use this (use same name for radio buttons to select only one.Otherwise, it looks like checkboxes)

 <label for="mylabel-1"><input name="rd" type="radio" id="mybutton-1"  checked>All</label>
 <label for="mylabel-2"><input name="rd" type="radio" id="mybutton-2"  >Open</label>
 <label for="mylabel-2"><input name="rd" type="radio" id="mybutton-3"  >Archived</label>
Comments