Skip to content

Instantly share code, notes, and snippets.

@zlargon

zlargon/[HTML] Trying to change the radio's view .html

Last active August 29, 2015 14:08
Show Gist options
  • Save zlargon/8f0476e1e2dba64999b7 to your computer and use it in GitHub Desktop.
Save zlargon/8f0476e1e2dba64999b7 to your computer and use it in GitHub Desktop.
Download ZIP
Using <input> CSS style 'appearance' to change the radio's view
Raw
[HTML] Trying to change the radio's view .html
<!--
Try to change radio's view
Using <input> CSS style 'appearance'
But How to display the words in input label?
Reference:
http://css-tricks.com/almanac/properties/a/appearance/
-->
<!doctype html>
<html>
<head>
<style>
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
width: 200px;
height: 50px;
margin: 2px;
background-color: #9DBADC;
}
input[type=radio]:checked {
background-color: #627EAD;
}
</style>
</head>
<body>
<input type="radio" name="catalog" value="1" onclick="console.log('select 1')">
<input type="radio" name="catalog" value="2" onclick="console.log('select 2')">
<input type="radio" name="catalog" value="3" onclick="console.log('select 3')">
<input type="radio" name="catalog" value="4" onclick="console.log('select 4')">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment