I'm curious if there is an easy way to make labels take on default values for CSS style properties. My checkboxes are taking on the properties of my tabs and I just want them to be default. As you will see I changed the font size for the checkboxes so that its smaller than the tabs. However, I don't want to write CSS just to cancel out the styling of the tabs. I know there is something I'm missing. Thanks.
CSS for tabs:
.tabs label {
box-shadow: 0px 4px 10px #888888;
display: block;
padding: 10px 20px;
border-radius: 2px 2px 0 0;
color: #207cca;
font-size: 20px;
font-weight: normal;
font-family: Impact, Verdana, sans-serif;
background: rgba(255,255,255,0.2);
cursor: pointer;
position: relative;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
CSS for checkboxes:
#sidebar label {
font-size: 10px;
}
HTML tabs:
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tab1">
<label for="tab1">Resource Browser</label>
<div id="tab-content1" class="tab-content animated fadeIn">
HTML checkboxes:
<div id="sidebar" class="sidebar">
<form action="/result/" method="get">
<p> Demographics </p>
<input type="checkbox" name="male" value="selected" id="g_male" />
<label for="g_male">male</label><br>
<input type="checkbox" name="female" value="selected" id="g_female" />
<label for="g_female">female</label><br>
<input type="checkbox" name="age1-3" value="selected" id="age1-3" />
<label for="age1-3">Age 1-3</label><br>
<input type="checkbox" name="age3-18" value="selected" id="age3-18" />
<label for="age3-18">Age 3-18</label><br>
<input type="checkbox" name="age18+" value="selected" id="age18+" />
<label for="age18+">Age 18+</label><br>
Aucun commentaire:
Enregistrer un commentaire