可能性

Question

我需要对一些radio输入进行样式化。我从这里尝试了一些解决方案，但没有一个适合我。有人可以看看这段代码并告诉我我该怎么办？

这是HTML：

<div class="controls">
  <table>
    <tbody>
      <tr>
        <td>
          <label class="radio">
            <input type="radio" name="ad_caroserie" value="0">Berlina
          </label>
        </td>
        <td>
          <label class="radio">
            <input type="radio" name="ad_caroserie" value="1">Break
          </label>
        </td>
        <td>
          <label class="radio">
            <input type="radio" name="ad_caroserie" value="2">Cabrio
          </label>
        </td>
      </tr>
    </tbody>
  </table>
</div>

CSS：

label.radio {
  background: #fcb608;
}
.radio input {
  display: none;
}
label.radio input[type="radio"]:checked + label {
  background: #000 !important;
  border: 1px solid green;
  padding: 2px 10px;
}

CSS没有达到预期的效果;你能帮我吗？

这是JS的一些相关摘录：

//If checkboxes or radio buttons, special treatment

  else if (jQ('input[name="'+parentname+'"]').is(':radio')  || jQ('input[name="'+parentname+'[]"]').is(':checkbox')) {
    var find = false;
    var allVals = [];
    jQ("input:checked").each(function() {
      for(var i = 0; i < parentvalues.length; i++) {
        if (jQ(this).val() == parentvalues[i] && find == false) {  
          jQ('#adminForm #f'+child).show();
          jQ('#adminForm #row_'+child).show();
          find = true;
        }
      }
    });
    if (find == false) {
      jQ('#adminForm #f'+child).hide();
      jQ('#adminForm #row_'+child).hide();
      //cleanup child field 
      if (jQ('#adminForm #f'+child).is(':checkbox') || jQ('#adminForm #f'+child).is(':radio')) {
        jQ('#adminForm #f'+child).attr('checked', false);
      }
      else {
        if (cleanValue == true) {
          jQ('#adminForm #f'+child).val('');
        }
      }
    }
  }
  else {
    var find = false;
    for(var i = 0; i < parentvalues.length; i++) {
      if (jQ('#adminForm #f'+parentname).val() == parentvalues[i] && find == false) {  
        jQ('#adminForm #f'+child).show();
        jQ('#adminForm #row_'+child).show();
        find = true;
      }
    }
    if(find == false) {
      jQ('#adminForm #f'+child).hide();
      jQ('#adminForm #row_'+child).hide();
      //cleanup child field 
      if (jQ('#adminForm #f'+child).is(':checkbox') || jQ('#adminForm #f'+child).is(':radio')) {
        jQ('#adminForm #f'+child).attr('checked', false);
      }
      else {
        if (cleanValue == true) {
          jQ('#adminForm #f'+child).val('');
        }
      }
    }
  }
}

function dependency(child,parentname,parentvalue) {
  var parentvalues = parentvalue.split(",");
  //if checkboxes
  jQ('input[name="'+parentname+'[]"]').change(function() {
    checkdependency(child,parentname,parentvalues,true);
    //if checkboxes
    jQ('input[name="'+child+'[]"]').change();
    jQ('input[name="'+child+'"]').change();
    jQ('#'+child).change();
  });
  //if buttons radio
  jQ('input[name="'+parentname+'"]').change(function() {
    checkdependency(child,parentname,parentvalues,true);
    //if checkboxes
    jQ('input[name="'+child+'[]"]').change();
    jQ('input[name="'+child+'"]').change();
    jQ('#'+child).change();
  });
  jQ('#f'+parentname).click(function() {
    checkdependency(child,parentname,parentvalues,true);
    //if checkboxes
    jQ('input[name="'+child+'[]"]').change();
    jQ('input[name="'+child+'"]').change();
    jQ('#f'+child).change();
  });
  checkdependency(child,parentname,parentvalues,false);
}

Answer 1

可能性

在我发布时，我并不确定所需的布局应该是什么，但是在尝试的CSS中存在一个需要解决的特定问题。

The adjacent siblings selector：

...分隔两个选择器，只有当它紧跟在第一个元素之后才匹配第二个元素。

如果<input>是<label>的孩子，则它不相邻，所以：

label.radio input[type="radio"]:checked + label

正在label内:checked input后面label正在寻找一个.radio，并且类似{1}}，并且不存在类似内容。

要在这种情况下更改label的样式，需要一个影响父currently isn't possible的选择器。

因此，要选择label :checked的{{1}}，我们需要input相邻，而不是父母。

我们可以使用for="id" attribute：

通过将控制元素置于label元素内，或使用<label>属性，<label>可与控件相关联。

正如我所说，我不确定所需的布局应该是什么，但这是一个使用for属性的示例，看起来并不太糟糕。

for

div {
  display: inline-block;
  position: relative;
}
label {
  background: #fcb608;
  padding: 2px 10px 2px 1.5em;
  border: 1px solid transparent; /* keeps layout from jumping */
}
input {
  position: absolute;
}
input[type="radio"]:checked + label {
  background: #000;
  border-color: green;
  color: white;
}

将`<div> <input id="id1" type="radio" name="ad_caroserie" value="0"><label for="id1" class="radio">Berlina</label> </div> <div> <input id="id2" type="radio" name="ad_caroserie" value="1"><label for="id2" class="radio">Break</label> </div> <div> <input id="id3" type="radio" name="ad_caroserie" value="2"><label for="id3" class="radio">Cabrio</label> </div>`作为`<input>`

的孩子

使用小型JavaScript处理程序 listening changes <label>。

如果检测到<form>，则触发的函数会检查change是否已更改，如果是，则检查<input type="radio">是否为<label>。
如果这是真的，它会检查是否有一个名称相同的parentElement，<input type="radio">元素与<label> class。
如果有，则会将.checked从class移除，然后将同一<label>应用于class <label>的父<input>这触发了整个事情。

target

let form = document.querySelector( "form" );
form.addEventListener( "change", ( evt ) => {
  let trg = evt.target,
      trg_par = trg.parentElement;
  if ( trg.type === "radio" && trg_par && trg_par.tagName.toLowerCase() === "label" ) {
    let prior = form.querySelector( 'label.checked input[name="' + trg.name + '"]' );
    if ( prior ) {
      prior.parentElement.classList.remove( "checked" );
    }
    trg_par.classList.add( "checked" );
  }
}, false );

label {
  background: #fcb608;
  padding: 2px 10px 2px 0;
  border: 1px solid transparent; /* keeps layout from jumping */
}
label.checked {
  background: #000;
  border-color: green;
  color: white;
}

没有JavaScript 事情变得困难（根据我原来的解释，为什么在这种情况下最好使用<form> <label class="radio"><input type="radio" name="ad_caroserie" value="0">Berlina</label> <label class="radio"><input type="radio" name="ad_caroserie" value="1">Break</label> <label class="radio"><input type="radio" name="ad_caroserie" value="2">Cabrio</label> </form>属性）。

我们可以使用appearance property（with prefixes和reasonable support）有效隐藏用户代理for GUI，然后使用剩余的无面为radio构建虚假 background的元素。

由于需要一些<label>定位和特定尺寸才能将其拉下来，因此非常黑客且动态性低于默认值。
它有点适用（在大多数浏览器中），但在整个网站范围内实施起来很棘手。

可以玩的东西： - ）

absolute

input {
  position: absolute;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 5em;
  height: 1.5em;
  z-index: -1;
  background: #fcb608;
  border: 1px solid transparent;
  margin: -.1em -.8em;
  outline: 0;
}
label {
  display: inline-block;
  width: 5em;
  color: white;
  text-shadow: 1px 1px 0px black;
}
input[type="radio"]:checked {
  background: #000;
  border-color: green;
}

Answer 2

使用jQuery和新的css类“选择”类似这样的东西：

开始时：

$("input[name='ad_caroserie']:checked").parent().addClass("selected");

和onchange：

$('input[type=radio][name=ad_caroserie]').change(function() {
  $("input[name='ad_caroserie']").parent().removeClass("selected");
  $("input[name='ad_caroserie']:checked").parent().addClass("selected");
  // console.log($("input[name='ad_caroserie']:checked").val());
});

Answer 3

尝试了很多时间使用纯HTML和CSS。我对使用JavaScript的简单解决方案感到满意。我认为这会有所帮助。

function check(btn) {
  let label = btn.children;
  label[0].checked = true;
}

.lib-radio {
  color: #1e1e1e;
  font-size: 1.0em;
  border-radius: 31px;
  font-weight: 400;
  width: 450px;
  height: 40px;
  border: 2px solid black;
  padding: 0.5em;
  font-family: Lato;
  margin: 10px 0 0 0;
}

.lib-radio:hover {
  background-color: #000;
  color: #FFF;
}

<div class="lib-one-input">

  <p class="lib-form-label">Select your gender</p>

  <div class="lib-radio" onclick="check(this)">

    <input id="s1yes" type="radio" name="mcq1" value="male">

    <label for="s1yes"> Yes, our researchers authored it</label><br />

  </div>

  <div class="lib-radio" onclick="check(this)">

    <input id="s1no" type="radio" name="mcq1" value="female">

    <label for="s1no"> No, we didn&#39t author it </label><br />

  </div>

</div>

Answer 4

<form id="button-form">
  <fieldset id="button-set">
    <label for="button-1">
      <input type="radio" id="button-1" name="button-group"/>
    </label>

    <label for="button-2">
      <input type="radio" id="button-2" name="button-group"/>
    </label>

    <label for="button-3">
      <input type="radio" id="button-3" name="button-group"/>
    </label>
  </fieldset>
</form>

<style>
  #button-set label > * {
    opacity: 0; <!-- hideing the radio buttons -->
  }
</style>

<script>
  function setColor(color) {
    document.getElementsByName("button-group").forEach(node => {
      node.checked === true
        ? (node.parentElement.style.background = color)
        : (node.parentElement.style.background = "rgba(0, 0, 0, 0.5)");
    });
  }

  window.onload = () => {
    document.getElementById("button-form").onchange = evt => {
      switch (evt.target) {
        case document.getElementsById("button-1"):
          setColor("rgba(0, 150, 0, 0.5)");
          break;
        case document.getElementsById("button-2"):
          setColor("rgba(250, 200, 0, 0.5)");
          break;
        case document.getElementsById("button-3"):
          setColor("rgba(250, 0, 0, 0.5)");
          break;
      }
    };
  };
</script>

如何设置已检查无线电输入的父标签的样式

4 个答案:

可能性