Question

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

以下是形式：https://secureforms.nextens.nl/TEMPLATE

我已经尝试使用：

*:focus {
outline: none;
 }

AND

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_valid_field,
input.LV_valid_field:hover,
input.LV_valid_field:active,
textarea.LV_valid_field:hover,
textarea.LV_valid_field:active {
        outline: 1px solid #00CC00;
}

.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active {
        outline: 1px solid #CC0000;
}

Answer 2

将此添加到您的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;
}

Answer 3

根据开发工具，是CSS的第7行引起了该问题：

.LV_valid_field, ...

如何取消对表单字段的关注

3 个答案: