CSS: Text input has another border when selected

Question

I have an input section for text and I would like the border-radius of that input to be 50px.

However, when I have the border-radius, the original border is still visible when that field is selected.

I have added a picture below where you can clearly see what I'm referring to. The light border with radius is what I want, but I am also getting another rectangular border.

Here's the CSS I currently have:

            .searchbox {
            
            width: 560px;
            height: 39px;
            border-color: #dedede;
            
            border-style: solid;
            border-radius: 50px;



        }

HTML for this is basic input:

<input type="text" name="q" class="searchbox">

Image attached

That's the [outline](https://developer.mozilla.org/en-US/docs/Web/CSS/outline), not the border — Itay, Sep 08 '20 at 08:15
Does this answer your question? https://stackoverflow.com/questions/1457849/how-to-remove-the-border-highlight-on-an-input-text-element — Always Helping, Sep 08 '20 at 08:20
Does this answer your question? https://stackoverflow.com/questions/3015523/remove-or-disable-focus-border-of-browser-via-javascript — Always Helping, Sep 08 '20 at 08:21
Hi Saj. Please refer to questions i have linked above. You will find plenty of very useful answers which are covered in details for learning as well regarding your question. Happy coding :) — Always Helping, Sep 08 '20 at 08:52
What you see, is the *outline*. Style it how you'd like it, but please don't remove it entirely without providing an alternative for keyboard users (http://www.outlinenone.com/). — Emaro, Sep 08 '20 at 08:59

score 4 · Answer 1 · answered Sep 08 '20 at 08:17

4

You should add

.searchbox:focus {
  outline: none;
}

.searchbox {
  width: 560px;
  height: 39px;
  border-color: #dedede;
  border-style: solid;
  border-radius: 50px;
}

.searchbox:focus {
  outline: none;
}

<input type="text" name="q" class="searchbox">

Reference

:focus

answered Sep 08 '20 at 08:17

hgb123

13,869
3
20
38

1

Please do not use `outline: none`. (http://www.outlinenone.com/) – Emaro Sep 08 '20 at 08:58

score 1 · Answer 2 · answered Sep 08 '20 at 08:52

You can add outline: none; to the :focus styles.

Never do this!

Some people navigate webpages with the tab key on their keyboard because they can't use a mouse. The outlines around elements help them see what they are focusing on. You are basically confusing them if you do this.

So you should definitely do something else on focus, such as change the background.

score 0 · Answer 3 · answered Sep 08 '20 at 08:25

0

Just add

.searchbox:focus {
  outline: 0;
}

to your CSS

answered Sep 08 '20 at 08:25

Yevhenii Shlapak

588
2
4
13

2

Please do not use `outline: none`. (http://www.outlinenone.com/) – Emaro Sep 08 '20 at 08:58

CSS: Text input has another border when selected

3 Answers3

Never do this!