We are displaying two radio buttons in page. Click on Radio buttons, it will change background color. Is there any way to improve the quality of the code?
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
body {
box-sizing: border-box;
padding-top: 180px;
background: #ffffff;
}
input {
display: none;
}
.button {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
margin: 10px;
cursor: pointer;
}
.button span {
display: block;
position: absolute;
width: 50px;
height: 50px;
padding: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 100%;
background: #eeeeee;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
transition: ease .3s;
}
.button span:hover {
padding: 10px;
}
.orange .button span {
background: #FF5722;
}
.amber .button span {
background: #FFC107;
}
.layer {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: transparent;
/*transition: ease .3s;*/
z-index: -1;
}
.orange input:checked ~ .layer {
background: #F4511E;
}
.amber input:checked ~ .layer {
background: #FFB300;
}<body>
<label class="orange">
<input type="radio" name="color" value="orange">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
<label class="amber">
<input type="radio" name="color" value="amber">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
</body>1 Answer 1
The code looks pretty good. I only see a couple CSS rules that appear to be useless - for instance:
background: #eeeeee;
under the ruleset:
.button span {
But that style is overridden by the background styles under the <label> tags (i.e. .orange .button span and .amber .button span). The only reason I could think that would be needed is if you have other HTML not included in the example above that would have other colors...
What is the goal of the styles for html? I read the answers to Styling the <html> element in CSS? and it leads me to believe it is an attempt to avoid scrollbars, but maybe that is incorrect.
And is it really necessary to specify
background: #ffffff;
for the body tag? Maybe there are browser settings I am unaware of that allow a user to have a default background color other than that??