Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Roll Button CSS not overriding the background.

1689560236

Edited 1689560658
I'm using the custom character sheet sandbox.  It applies everything but the background color; weirdly, when I hover, the background color changes to the correct color but only halfway. What I'm wanting is for it to look like white text that when hovering turns red. The text color change works but for some reason, the color of the button background isn't changing properly. .charsheet button[type=roll].sheet-skillbtn::before {content: ""; } .charsheet button[type=roll].sheet-skillbtn { height: 20px; border: none; background-color: #1f1f1f; padding: none; font-weight: bold; color: white; } .charsheet button[type=roll].sheet-skillbtn:hover { color: red; } <fieldset class="repeating_sheet-ranking">     <button type="roll" class="sheet-skillbtn" value='&{template:default} {{name=Engineering}} {{Result=[[@{char_engineering}]]}}' name'roll_engineering'>Engineering</button> <select name="attr_char_engineering">      <option value="2d12kl1">Rank 0</option>      <option value="1d12">Rank 1</option>              <option value="1d12+1d2">Rank 2</option>      <option value="1d12+1d4">Rank 3</option>      <option value="1d12+1d6">Rank 4</option>      <option value="1d12+1d8">Rank 5</option>      <option value="1d12+1d10">Rank 6</option>      <option value="1d12+1d12">Rank 7</option> </select>
1689566103

Edited 1689566875
vÍnce
Pro
Sheet Author
What color do you want the background to be when you hover over the button? You should be able to just add a background color like so; .charsheet button[type=roll].sheet-skillbtn::before { content: ""; } .charsheet button[type=roll].sheet-skillbtn { height: 20px; border: none; background-color: #1f1f1f; padding: 2px; font-weight: bold; background-image: none; color: white; } .charsheet button[type=roll].sheet-skillbtn:hover { color: red; background-color: #1f1f1f; } Also, roll20 applies some default formatting to buttons. I added background-image: none; and a little padding which might help as well. Maybe you're handling that in some other css. not sure.
1689567649

Edited 1689567672
That worked! I didn't realize it was an image. I thought it was just white color and was attempting to change that. Thank you so much! I wasn't trying to change the background color on hover, I just noted that it was only changing on hover.