Menu
how is it possible to make one class inherit from another in the CSS file?
input.btn {
border:1px solid #23458c;
background:url('gfx/layout.btn_bg.png');
color:#f0f5fa;
font-weight:bold;
margin-right:6px;
padding:1px 6px 2px 6px;
cursor:pointer;
}
input.btn_light {
border:1px solid #717b8f;
background:url('gfx/layout.btn_light_bg.png');
}
here I want input.btn_light to inherit from input.btn.. how is that possible to do in the CSS file?
input.btn {
border:1px solid #23458c;
background:url('gfx/layout.btn_bg.png');
color:#f0f5fa;
font-weight:bold;
margin-right:6px;
padding:3px 6px 4px 6px;
cursor:pointer;
}
input.btn_light {
input.btn;
border:1px solid #717b8f;
background:url('gfx/layout.btn_light_bg.png');
}
553
Give the HTML element both classes:
<input type="submit" class="btn btn_light" value="Action" />
According to: http://dorward.me.uk/www/css/inheritance/ it is not possible and needed.
26
As an alternative to the accepted answer, you can also do the following with your CSS. The difference being that instead of using multiple class names where it will be used, this way uses multiple class names in the CSS to say "use this style and this style". Then, the reference (the input button in this case) only uses one class name.
In the end, it accomplishes the same thing as the accepted answer.
Note: I changed the value of the borders because I wanted to use values that were less subtle for the snippet.
input.btn,
input.btn_light {
border: 2px solid red;
background: url('gfx/layout.btn_bg.png');
color: black;
font-weight: bold;
margin-right: 6px;
padding: 1px 6px 2px 6px;
cursor: pointer;
}
input.btn_light {
border: 2px solid green;
background: url('gfx/layout.btn_light_bg.png');
}<body>
<input type="button" class="btn" value="Regular">
<br>
<input type="button" class="btn_light" value="Light">
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
