选项CSS在Chrome上不起作用

Question

此代码对Mozilla正常，但对Chrome无效

option:checked { 
  -webkit-border-radius: 5px !important;
  box-shadow: 0 0 10px 10px #043A4D inset;
}

Answer 1

如果您想更多vendor-specific于vendor-specific使用此

option:checked {
  -webkit-border-radius: 5px!important;
  -moz-border-radius: 5px!important;
  border-radius: 5px!important;
  -moz-box-shadow: 0 0 10px 10px #043A4D inset;
  -webkit-box-shadow: 0 0 10px 10px #043A4D inset;
  box-shadow: 0 0 10px 10px #043A4D inset;
}

Answer 2

我认为您是指元素聚焦时出现的轮廓。 如果是这样，请尝试使用

option:focus, option:active {
    outline: none;
}

但是，您应该将其替换为某些内容，因为它有助于选择的元素的可见性，也有助于键盘导航。

如果不是问题所在，请提供一个显示问题的屏幕截图。

CSS技巧上的大纲用法的一些示例