使下拉窗口中的项目成为“非焦点”

提问者：小点点

使下拉窗口中的项目成为“非焦点”

有没有可能让下拉菜单的选择窗口使用css中的焦点标记，但下拉菜单中的实际元素不使用该焦点标记？我现在使用选项：checked标记，但这只会更改选定的项目。这是我的代码：

       <div class="apply_form-entercountry">
            <div>
                <select class="input-entercountry"> /*this is the bit that should use focus*/
                    <option>Country*</option> /*these are the elements without focus*/
                    <option>Afghanistan</option>
                    <option>...</option>
                </select>
            </div>
        </div>


.apply_form-entercountry {
  position: relative;
  font-size:20px;
  text-align: left;
  left:37%;
  padding-bottom: 20px;
}

.input-entercountry {
  display:block;
  width: 31%;
  border: 1px solid rgb(70, 70, 70);
  border-radius: 0px;
  padding: 15px 20px;
}

.input-entercountry:hover {
  background-color: rgba(150, 204, 148, 0.575);
}

.input-entercountry:focus {
  background-color: rgba(148, 170, 204, 0.397);
  outline: none;
}

.input-entercountry option:checked {
  background-color:#f2f2f2;
}

共1个答案

匿名用户

所选内容的选项从所选内容本身继承背景颜色。因此，通过为它们提供自己的背景色，它们将不会使用