This issue has been on my mind for quite some time now, and despite trying various solutions, I haven't found a satisfactory fix.
Within my style sheet, the following code is present:
.message input[type='submit'] {
background-color: grey;
color: #d5d5d5;
cursor: pointer;
font: 13px/30px Arial, Helvetica, sans-serif;
height: 40px;
min-width: 120px;
border: 0;
margin: 10px 10px 0 0;
font-weight:bold;
}
.tool {
background-repeat: no-repeat;
background-size:40px 40px;
height: 50px;
width: 50px;
min-width: 50px;
border: 0px;
background-color: #fff;
cursor: pointer;
outline: 0;
margin: 0 0 0 0;
}
The .message styles are applied to all text-based submit buttons in a form to ensure they appear visually appealing, while the styles for (icon) tool buttons are specified through the second set of CSS rules. The challenge arises when both types of buttons coexist within the same form, as the .message settings take precedence over the tool button styles.
<form class="message">
<input type="submit">OK</submit>
<input type="submit" class="tool"/>
</form>
I am looking for a way to allow the child class (.tool) to override the parent settings without having to resort to using an id.
I have attempted the following:
.message .tool {...}
However, this approach did not yield the desired outcome.