mercredi 1 avril 2015

HTML/CSS labels: Labels taking on the properties of other labels

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.


enter image description here


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