如何删除输入字段周围的轮廓？

Question

我正在创建联系人表格，当我单击输入字段时，它周围有一个轮廓。

---

这是我的html代码：

<div class="row contact-form">
                <div class="col-sm-8">

<div class="row contact-form">
    <div class="col-sm-8">

        <form action="" method="POST">
            <div class="row">
                <div class="col-sm-6">
                    <label for="firstName">First name<span style="color: red;">*</span></label>
                    <input type="text" class="form-control" id="firstName" name="fname" required>
                </div>
                <div class="col-sm-6">
                    <label for="lastName">Last name<span style="color: red;">*</span></label>
                    <input type="text" class="form-control" id="lastName" name="lname">
                </div>
            </div>
        </form>
    </div>
</div>

我已经尝试过此CSS，但是没有用：

.contact-form input:focus, textarea:focus, select:focus {
    outline: none;
}

如何删除它？ 谢谢

Answer 1

1）outline: none;是您要寻找的

2）使用!important是不好的做法。尝试不要这样做

3）切勿隐藏轮廓！

看看

https://medium.com/better-programming/a11y-never-remove-the-outlines-ee4efc7a9968

Answer 2

您应该使用此行

.form-control:focus {
    box-shadow: none !important;
}

Answer 3

尝试此代码。

pending_provider/722c9cb2-268b-4e4a-9000-f7f65e586011-version/ (stored 0%)