0

TL;DR: Modify CSS :before, to previous sub divs

I'm currently working with a CMS, trying to modify some of the CSS. I can't change the HTML to make this easier, so I have to rework the CSS

I'm copying a rating system code from https://codeconvey.com.

The HTML for the input for the code sample is along the lines of:

<div class="form-group">
     <input ...>
     <label ...>
     <input ...>
     <label ..>
</div>

While the HTML I have to work with is:

<div class="form-group">
     <div class="form-check">
          <input ...>
          <label ...>
     </div>
     <div class="form-check">
          <input ...>
          <label ...>
     </div>
</div>

Where I'm stuck is the code sample uses :before, and :hover to highlight the previous stars. I need assistance in how to change the CSS to have the same affect over divs. Here's the code I have

.form-group  {
    display: inline-block;
}
.form-group  * {
  font-size: 3rem;
}
.form-group  .form-check > input {
  display: none;
}
.form-group  .form-check > input + label {
  /* only enough room for the star */
  display: inline-block;
  overflow: hidden;
  text-indent: 9999px;
  width: 1em;
  white-space: nowrap;
  cursor: pointer;
}
.form-group .form-check > input + label:before {
  display: inline-block;
  text-indent: -9999px;
  content: "☆";
  color: #888;
}
.form-group .form-check > input:checked ~ label:before, .form-group  > div + label:hover ~ label:before, .form-group  > div + label:hover:before {
  content: "★";
  color: #78c494;
  text-shadow: 0 0 1px #333;
}
.form-group .form-check > #form-check-57217rate5 + label {
  text-indent: -9999px;
  width: .5em;
  margin-left: -.5em;
}
.form-group .form-check > #form-check-57217rate5 + label:before {
  width: .5em;
}
.form-group :hover .form-check > input + label:before {
  content: "☆";
  color: #888;
  text-shadow: none;
}
.form-group :hover .form-check > input + label:hover ~ label:before, .form-group :hover > input + label:hover:before {
  content: "★";
  color: #78c494;
  text-shadow: 0 0 1px #333;
}

the form-check-57217 is the last radio button, value 0

  • 1
    Css always flows forwards so there is no previous sibling selector. A way to rework this is to set the default state to selected and then your hover state and following siblings to empty - see this: https://codepen.io/jamesbarnett/pen/vlpkh – Pete Aug 25 '20 at 13:21
  • Hi Pete, unfortunately I cant set them to selected as the HTML is rendered by the CMS. Annoyingly they set it so each is in a div, which makes no sense to me –  Aug 25 '20 at 13:24
  • you don't have to change the html, just swap the css around, if that's not possible, then you are going to have to use js to add a class to the previous siblings – Pete Aug 25 '20 at 13:26
  • Having looked again at the html you are working with, you will need js anyway as your inputs aren't siblings – Pete Aug 25 '20 at 13:34
  • I am able to embed JS. Would I be able to get the same affect? (Also each input does have a common class "form-check-input" that I can use to call all inputs) –  Aug 25 '20 at 13:37
  • It doesn't really matter about your class - the way these things work is that the radios are siblings with their labels following them, you can then apply a default style to the labels to show the selected star and then after the checked / hovered radio, the labels get the empty star, but as you have nested the inputs, there is no way to tell the css which star should be checked or not - just the current selected / hovered one. The js would be needed to add a class to all the inputs before the current selected or hovered so you could change them to stars – Pete Aug 25 '20 at 13:42
  • Thanks pete, I'll try that out. –  Aug 25 '20 at 13:55

0 Answers0