semantic框架 - selection dropdown自定义样式

semantic和Bootstrap是我最常用的前端框架。

这次需求,是要修改selection dropdown。

直接贴代码,不解释。

.ui.form input:not([type]):focus,
.ui.form input[type="date"]:focus,
.ui.form input[type="datetime-local"]:focus,
.ui.form input[type="email"]:focus,
.ui.form input[type="number"]:focus,
.ui.form input[type="password"]:focus,
.ui.form input[type="search"]:focus,
.ui.form input[type="tel"]:focus,
.ui.form input[type="time"]:focus,
.ui.form input[type="text"]:focus,
.ui.form input[type="file"]:focus,
.ui.form input[type="url"]:focus {
    border: 1px solid #111111;
    background: #00ffe1;
}

.ui.form textarea:focus {
    border: 1px solid #111111;
    background: #00ffe1;
}

/* dropdown */
.ui.selection.dropdown {
    border: 1px solid #111111;
    background: #00ffe1;
}

.ui.dropdown .menu {
    background: #00ffe1;
    border: 1px solid #111111;
}

/* dropdown Hover */
.ui.selection.dropdown:hover {
    border-color: #111111;
}

/* dropdown Active */
.ui.selection.active.dropdown {
    border-color: #111111;
}
.ui.selection.active.dropdown .menu {
    border-color: #111111;
}

/* dropdown Focus */
.ui.selection.dropdown:focus {
    border-color: #111111;
}
.ui.selection.dropdown:focus .menu {
    border-color: #111111;
}

/* dropdown Visible Hover */
.ui.selection.active.dropdown:hover {
    border-color: #111111;
}
.ui.selection.active.dropdown:hover .menu {
    border-color: #111111;
}

 

相关文章:

  • 2022-01-01
  • 2022-01-01
  • 2021-05-26
  • 2021-11-04
  • 2022-01-06
  • 2021-12-06
猜你喜欢
  • 2021-11-13
  • 2022-03-07
  • 2021-08-28
  • 2021-04-16
  • 2022-01-15
  • 2021-12-19
相关资源
相似解决方案