主页 / 问题 / 613159
Accepted
VaskM
Asked:2020-01-11 04:39:04 +0000 UTC2020-01-11 04:39:04 +0000 UTC

radio:checked 时需要更改 div

  • 772
<div id = "a" style = "w:100px; h:100px; bg-color:black"></div>
<input type = "radio" id = "b" name = "c"/>

当使用 radio:checked 时，#a 块的颜色必须改变。

css

3 个回答

  1. Best Answer

    input只有在 前面时才能这样做div。但是如果你正好需要这个位置，那么你可以使用flexbox并替换可见位置：

    .block {display:flex;}

.block input {order: 2;}
.block div {order: 1;}

input:checked + div {color: red}
    <div class="block">
  <input type="radio" name="c">
  <div>Text 1</div>
</div>
<div class="block">
  <input type="radio" name="c">
  <div>Text 2</div>
</div>
<div class="block">
  <input type="radio" name="c">
  <div>Text 3</div>
</div>

    • 1

  2. 作为一种选择。使用样式、添加类或 ID 并使用 css 进行跟踪

    select {
  display: none;
}

input#radio_1:checked ~ #select_1{
  display: block;
}
input#radio_2:checked ~ #select_2{
  display: block;
}
    <div id="test">
    <input type="radio" name="radio" id="radio_1">
    <input type="radio" name="radio" id="radio_2">
    
    <select name="select_1" id="select_1">
        <option value="optin_1">option_1</option>
    </select>
    <select name="select_1" id="select_2">
        <option value="optin_2">option_2</option>
    </select>
</div>

    • 0 

  3. #b:checked ~ #a {
background-color:gray !important;
}
    <input type = "radio" id = "b" name = "c"/>
<input type = "radio" id = "c" name = "c"/>

<div id = "a" style = "width:100px; height:100px; background-color:black"></div>

    • 0

相关问题