How do i remove outline around input field?

Question

I'm creating a contact form and when I click into my input field there is an outline around it.

Here is my html code:

<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>

I've tried this css, but didn't work:

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

How can I remove it? Thanks

Why not simply .contact-form input { outline: none; } ? – Federico Provenziani Apr 30 '20 at 08:10 — Federico Provenziani, Apr 30 '20 at 08:10

score 3 · Answer 1 · answered Apr 30 '20 at 08:28

3

1) outline: none; is what You are looking for

2) Using !important is a bad practice. Try not to do that

3) Never hide the outline!

Take a look

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

answered Apr 30 '20 at 08:28

AdamKniec

1,607
9
25

1

Definitely should be marked as better answer. – Federico Provenziani Apr 30 '20 at 08:34

score 2 · Accepted Answer · answered Apr 30 '20 at 08:05

2

you should use this line

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

answered Apr 30 '20 at 08:05

mohsen Zare

386
1
9

1

Thank you this worked. For Chrome we also have to use -webkit-box-shadow – PapT Apr 30 '20 at 08:12
1

Avoid using `!important`, instead mention the actual element itself to gain more specificity. Ex: `input.form-control:focus` OR `.form-control[type="text"]:focus` – Ismail Vittal Apr 30 '20 at 10:29

score 0 · Answer 3 · answered Apr 30 '20 at 08:05

0

Try this code.

textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus,
{
    outline:0px !important;
    -webkit-appearance:none;
    box-shadow: none !important;
}

answered Apr 30 '20 at 08:05

Sahil Gupta

578
5
16

How do i remove outline around input field?

3 Answers3