Question

select[value="2"]+div{
  background:blue;
  font-size: 20px;
}
select[value="3"]+div{
  background:red;
}

<select name="" id="">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<div>hi</div>

当选择更改时，我想控制div标签的背景。只能使用CSS吗？

Answer 1

仅CSS不可能。您应该使用jQuery创建一个函数并通过onChange事件调用它

<select name="" id="selectBox" onChange='funcChangeCSS()'>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <div id="divhi">hi</div>

jQuery：

function funcChangeCSS() {
    if($("#selectBox").val() == 2) {
        $("#divhi").css({"background", "blue", "font-size", " 20px"});
    } else if($("#selectBox").val() == 3) {
        $("#divhi").css("background", "red");
    }
}

Answer 2

不幸的是，事实并非如此。 CSS属性选择器不适用于DOM属性，选择选项不会更改这些属性，只会更改属性。

我不确定，这是否适用于您的用例，但是您可以做的一件事是使用：valid和：invalid伪类为div上色。看起来像这样：

select:valid + div {
  color: green;
}

<select required>
  <option value="">Empty</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<div>HI</div>

Answer 3

那是不可能的。 CSS无法监控select的更改。您可以使用JavaScript来控制div标签的背景。

table_styles = [dict(selector="tbody tr th", props=[("display", "none")]),
st=df.style.set_table_styles(table_styles).hide_index()
st.render()

var select = document.querySelector("select");
var div = document.querySelector("#div");
select.onchange = function(){
  var index = select.options.selectedIndex;
  switch(index){
    case 0:
      div.style.backgroundColor = "blue";
      break;
    case 1:
      div.style.backgroundColor = "red";
      break;
    case 2:
      div.style.backgroundColor = "yellow";
      break;
  }
}

Answer 4

select option {
    margin: 40px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

如果要为每个选项标签设置样式，请使用css属性选择器：

select option {
    margin: 40px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

select option[value="1"] { /* value not val */
    background: rgba(100, 100, 100, 0.3);
}

select option[value="2"] { /* value not val */
    background: rgba(200, 200, 200, 0.3);
}

CSS更改选择标记后是否可以控制div？

4 个答案: