Question

我背后有一个标签和下拉列表

它是这样的：

    <div class="=row dropdown" id="conTypeSelect" >
        <label id="connectTypeLabel" class="label">Connector Type</label>
        <select id="connecType" name="connecType" class="dropdownList" >
            <option>type1</option>
            <option>type2</option>
        </select>
    </div>

我想要它，所以当点击元素使标签颜色变为蓝色时。我知道如何通过一个脚本通过选择触发器关闭事件来执行它，并将css添加到标签以将其设置为蓝色。

但是我想知道是否有办法通过css完成它。使用脚本似乎使我的代码对于这样的事情变得更加混乱。

所以我想把css添加到父级并使其成为

.dropdown:focus {
color: #1A98C6;
}
.label:focus {
    color: #1A98C6;
}
.dropdownList:focus {
    border-bottom: solid 1px #1A98C6;
    border-right: solid 1px #1A98C6;
    outline: none;
}

然而将此应用于父div并不适用于孩子。是否有一种方法可以实现这一点，当我关注父母时，孩子也会用css专注？

我试图将其用作css，但它似乎不起作用：

.dropdown:focus .label {
color: #1A98C6;
}

.dropdown:focus .dropdownList {
border-bottom: solid 1px #1A98C6;
border-right: solid 1px #1A98C6;
outline: none;
}

Answer 1

您可以通过+选择器实现此目的，并将label放在select之后，这样您就可以执行类似的操作 .dropdown select:focus + label选择焦点选择框后的标签并在标签上使用float:left和右侧边距将标签拉到选择框的左侧。

.dropdown>select+label {
  float: left;
  margin-right: 10px;
}

.dropdown>select:focus+label {
  color: #1A98C6;
  float: left;
  margin-right: 10px;
}

.dropdown>select:focus {
  border-bottom: solid 1px #1A98C6;
  border-right: solid 1px #1A98C6;
  outline: none;
  background: blue;
  color: white;
}

<div class="=row dropdown" id="conTypeSelect">

  <select id="connecType" name="connecType" class="dropdownList">
            <option>type1</option>
            <option>type2</option>
        </select>
  <label id="connectTypeLabel" class="label">Connector Type</label>
</div>

注意：我刚刚在background添加了color和select，只是为了在聚焦时显示效果。

Answer 2

这是我可以想到只使用CSS触发的唯一方法，点击//For displaying the row as linear list view case R.id.ivGrid: ivList.setVisibility(View.VISIBLE); ivGrid.setVisibility(View.GONE); LinearLayoutManager llm = new LinearLayoutManager(context); rcvProducts.setLayoutManager(llm); break; //For displaying the row as gridview case R.id.ivList: ivList.setVisibility(View.GONE); ivGrid.setVisibility(View.VISIBLE); GridLayoutManager glm = new GridLayoutManager(this,2,GridLayoutManager.VERTICAL, false); rcvProducts.setLayoutManager(glm); break;。

<input type="checkbox">

body {
    font-family: Arial;
    font-size: 13px;
}

input[type=checkbox]{
    display: none;
}

ul{
    display: none;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0;
    width: 100px;
}

ul li {
  border-bottom: 1px solid #eee;
  cursor: pointer;
  line-height: 30px;
  list-style: none;
  text-align: center;
  
}

ul li:hover {
  background-color: #333;
  color: #fff;
}

input[type=checkbox]:checked ~ ul {
    display: block
}

应用：当父选择css3时，关注子元素

2 个答案: