Eduardo :
In my code I have a generic form for all my button:
input[type="button"],put[type="button"]:active,input[type="button"]:hover {
width: 172px;
height: 37px;
line-height: 2 !important;
margin: 11px 0px 0px 0px;
padding: 5px 150px 9px 5px;
line-height: 19px;
font-size: 12px;
}
But some buttons in the system are half or a third the width of the generic buttons. And so they are still type button and receive the css above but I want to change only the width and have it look something like this without using !important.
.thirdButton, .thirdButton:active {
width: 28px;
padding: 0;
background-position-x: 50%;
}
blurfus :
You can add more specificity to your CSS, to very precisely target that type of element as well as increase the power of that selector. Like input[type="button"].thirdButton{...} see demo below:
input[type="button"],
input[type="button"]:active,
input[type="button"]:hover {
width: 172px;
height: 37px;
line-height: 2 !important;
margin: 11px 0px 0px 0px;
padding: 5px 150px 9px 5px;
line-height: 19px;
font-size: 12px;
}
/* this is the selector line to change */
input[type="button"].thirdButton, input[type="button"].thirdButton:hover,
input[type="button"].thirdButton:active {
width: 50px;
padding: 0;
background-position-x: 50%;
}<input type="button" name="generic" value="generic" /><br/>
<input type="button" name="third" value="third" class="thirdButton" />Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=368234&siteId=1