Question

这是问题，我有一个输入字段，我设置：

outline: none !important;

在Chrome中，当我输入一些字母时，它可以正常工作。但是，当我在Firefox中测试时，会出现紫色焦点边框。

如何禁用它？

这是html文件：

    <html>
    <head>
    <style type="text/css">

    .input-large{

    position: absolute;
    width: 800px;
    margin: 0 auto;;
    background: transparent;
    font-size: 150px;
    text-align: left;
    border: 0;
    letter-spacing: 35px;
    outline: none !important;
    font-family: Courier New !important;


    }

    </style>
    </head>
    <body>


    <input class="input-large" type="text" pattern="[0-9]*" maxlength="5" size="5" autofocus>


    </body>
    </html>

Answer 1

input {
     -moz-box-shadow: none;
}

在mozilla firefox中将输入框阴影设为无。尝试使用它，它对我来说很好。

Answer 2

每个input字段都有一个:invalid属性，默认情况下它会在firefox中呈现为红色轮廓/阴影。

要覆盖此项，请在CSS中添加以下代码

.input-large:invalid
    {
    box-shadow: 0 0 0 white;
   -moz-box-shadow: 0 0 0 white;
    }

此致

希瓦

输入字段焦点可以控制Chrome和Firefox中的不同行为

2 个答案: