html - 如何删除对表单域的关注

Question

我已经创建了一个表单并将焦点设置为none，但在测试时我仍然让绿色框出现并停留在每个表单字段周围。

这是表格:https://secureforms.nextens.nl/TEMPLATE

我已经尝试过使用:

*:focus {
outline: none;
 }

和

input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}

但出于某种原因，这仍然无法正常工作。下面是我用来设置表单样式的 CSS。

input[type=text], select {
   font-size:15px;
   width: 85%;
   margin: 8px 0;
   padding-left: 10px;
   padding-top: 10px;
   padding-bottom: 10px;
   display: inline-block;
   border: 1px solid #ccc;
   border-radius: 25px;
   box-sizing: content-box;
}
.elq-form select
{
   font-size:15px;
   width: 85%;
   margin: 8px 0;
   padding-left: 10px;
   padding-top: 10px;
   padding-bottom: 10px;
   display: inline-block;
   border: 1px solid #ccc;
   border-radius: 25px;
   box-sizing: content-box;
}

.elq-form radio
{
   font-size:15px;
   width: 100%;
   margin: 8px 0;
   display: inline-block;
   border: 1px solid #ccc;
   border-radius: 25px;
   box-sizing: content-box;
}

input[type=submit] {
   width: 100%;
   background-color: #337ab7;
   color: white;
   margin-top: 8px;
   margin-bottom: 8px;
   border: none;
   border-radius: 0px;
   cursor: pointer;
}

input[type=submit]:hover {
   background-color: #337ab7;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

我只希望表单域周围的绿色突出显示不显示。

Answer 1

在你的CSS中添加这个

.LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active,
.LV_valid_field, input.LV_valid_field:hover, input.LV_valid_field:active, textarea.LV_valid_field:hover, textarea.LV_valid_field:active {
    outline: 0;
}