How to handle a given html-nesting

[dmenne]

Great project. Having portable and scalable large icons is very helpful for programs used on tablets by clumsy fingers.

I am using formio, and since custom components are buggy as hell, I would like to use some global (s)css to format my radio button.

Unfortunately, the format of divs/label is given, and it is not standard. I cannot change the nesting of input within label. I can add classes. Below my attempts to make it work with pretty (add another one for correct radioboxing), but the mark does not appear.

Any ideas? The optimal solution would be to find some global scss.

<div class="pretty p-default p-round">
  <div class="state">
    <label>
      <input type="radio" name="switch1">
      <span>addd</span>
    </label>
  </div>
</div>

As created by formio, it looks like this:

<div class="form-radio radio">
    <div ref="wrapper" class="form-check">
      <label for="ey6dqlp-a" class="form-check-label label-position-right">
        <input id="ey6dqlp-a" value="a" lang="en" class="form-check-input" type="radio" name="data[radio1][ey6dqlp]" ref="input">
        <span>a</span>
      </label>
    </div>

    <div ref="wrapper" class="form-check">
      <label for="ey6dqlp-b" class="form-check-label label-position-right">
        <input id="ey6dqlp-b" value="b" lang="en" class="form-check-input" type="radio" name="data[radio1][ey6dqlp]" ref="input">
        <span>b</span>
      </label>
    </div>

[miladfm]

thank you @dmenne

I understand what you mean and I have also same problem. But unfortunately the original library (pretty-checkbox) need this html format and I can not change it. this project is just Angular component for original library.