如何设置CSS及其选择菜单？

Question

我是后端开发人员，学习前端，是CSS的新手。

处理项目时，必须为df2 <- data.frame(x1=c(4,5,3,9,6), x2=c(7,8,1,2,5), x3=c("g","w","t","o","n")) df2 标签设置默认的CSS。但是，单击此标签时，边框颜色从绿色变为蓝色，文本颜色从绿色变为黑色。试图找出点击实现的CSS，但是没有用。在inspect元素上可见的是某个事件在 x1 x2 x3 1: 4 7 g 2: 5 8 w 3: 3 1 t 4: 9 2 o 5: 6 5 n 上处于活动状态。试图在点击时添加我自己的事件，然后改回CSS，但是无法实现。

CSS：

// add parameter when opening video in popup
$(".lightbox-trigger").on("click", function() { 
    $(".mfp-wrap .et_pb_video.autoplay iframe").each(function(){
        var addautoplay = $(this).attr("src")+"&autoplay=1";
        $(this).attr("src",addautoplay);
    });
});

//for removing the parameter when closing the video
$('.lightbox-overlay').click(function() { 
    $(".et_pb_video.autoplay iframe").each(function(){
        var removeautoplay = $(this).attr("src").replace("&autoplay=1", "");
        $(this).attr("src",removeautoplay);
    });
    $.magnificPopup.close();
});

试图在自定义点击事件中添加相同的类，但是其他替代了我的CSS。

JS：

select

如何在select标签及其.customSelect { border-radius: 1.25rem; height: calc(5.25rem + 2px); font-size: 3rem; color: #00a082; border: 3px solid #cbece5; } 下拉菜单上添加自定义CSS？

编辑为什么不复制how-to-style-the-option-of-a-html-select

我的问题不是设置$("#selectId").click( () => { $("#selectId").addClass('customSelect'); }); 标签的样式，而是阻止我的select框从将边框颜色更改为蓝色，就像单击option或option标签一样默认情况下，这些更改为蓝色。像注释，问题标题，问题正文和答案框一样，单击后它们的边框颜色都变为蓝色。我不希望那样发生。

Answer 1

有时候很难找到CSS，尝试用:active或:hover等检查元素，状态如下：

Answer 2

您可能必须自己构建一个，因为访问select元素的各个元素很复杂。我希望有人可以提供更好的答案，但万一不能：W3 Schools的文档化方法很繁琐。

https://www.w3schools.com/howto/howto_custom_select.asp

（对不起，链接；已编辑）

Answer 3

您可以使用CSS伪类为元素分配不同的值。

您可以使用：

.customSelect:hover以在鼠标悬停时分配样式。

.customSelect:active以在单击某些内容后分配样式。

.customSelect:focus为键盘指定或鼠标激活的元素分配样式。

这将是原始.customSelect的另一种样式，如下所示：

.customSelect {
  border-radius: 1.25rem;
  height: calc(5.25rem + 2px);
  font-size: 3rem;
  color: #00a082;
  border: 3px solid #cbece5;
}

.customSelect:hover {
  new-styles: new value;
}

您也可以将它们链接在一起：

.customSelect:hover, .customSelect:active {
  style-to-apply-to-both: value;
}

在此处了解有关选择器的更多信息：https://www.w3schools.com/cssref/sel_hover.asp

Answer 4

弄清楚了。蓝色并单击 input ， select 和 textarea 标签是由于 bootstrap CSS引起的。从 select 中删除了类form-control，并添加了以下类。现在一切正常。

CSS：

/* Customized Select Box */
.customSelect {
    background-color: #fff;
    background-clip: padding-box;
    border: 0.5rem solid #cbece5;
    border-radius: 1.25rem;
    color: #00a082;
    display: block;
    font-size: 2rem;
    height: 3.5rem;
    line-height: 1.5;
    padding: 0.25rem 0.75rem;
    width: 100%;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition-property: border-color, box-shadow;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0s, 0s;
}