How to change bg block via input[type=radio]?

Question

css

<div class="product-logo-txt">
                 <input class="product-logo-field" type="text" id="monogram-inp" min="1" max="3" placeholder="">
                          <label class="product-lbl" for="monogram-inp">Type your initials or name above</label>
                        </div>
                      </div>
                      <div class="product-monogram">
                        <h2 class="product-monogram-ttl">Choose your format</h2>
                        <input type="radio" name="monogram-change-control " id="cb1" value="format 1" checked="" />
                        <input type="radio" name="monogram-change-control " id="cb2" value="format 2"/>
                        <input type="radio" name="monogram-change-control " id="cb3" value="format 3"/>
                        <ul class="product-monogram-list clearfix">
                          <li>
                            <label class="monogram-control__lbl" for="cb1">
                              <div class="monogram-bg monogram-one-bg"></div>
                              <span>Max 10 letters</span>
                            </label>
                          </li>
                          <li>
                            <label class="monogram-control__lbl" for="cb2">
                               <div class="monogram-bg monogram-two-bg"></div>
                              <span>Max 3 letters</span>
                            </label>
                          </li>
                          <li>
                            <label class="monogram-control__lbl" for="cb3">
                               <div class="monogram-bg monogram-three-bg"></div>
                              <span>Max 3 letters</span>

How to change the background of monogram-two-bg monogram-one-bg monogram-three-bg?

Answer 1

Do you mean so?

Answer 2

With your markup, no way.

Answer 3

JavaScript?)