Rounded input text box, but square selection box appears

Question

I make a text input box have rounded corners, but when I select it to type, a square selection box surrounds it.

How can I make the selection box to have rounded corners as well? Or is there a way to disable the square selection box that appears?

Thanks for your help.

Does this answer your question? [How to remove the border highlight on an input text element](https://stackoverflow.com/questions/1457849/how-to-remove-the-border-highlight-on-an-input-text-element) — , Nov 18 '20 at 22:21
yes, thank you. I wasn't able to find forum threads that existed on this topic as I used the wrong keywords to look for them. — rickyc, Nov 18 '20 at 23:51

score 1 · Accepted Answer · answered Nov 18 '20 at 22:17

What's showing up is the outline. The outline is a CSS property. It appears on elements that are in focus (such as an input being typed in). You can remove it if you like, but make sure to use border, box-shadow, or something else when it is focused. Adding a focus indicator is important for web accessibility. Here's an example of what is happening and a possible solution:

input {
border-radius: 10px;
}

#input2 {
  outline: none;
}

#input2:focus {
  border: 2px solid blue;
}

<input id="input1">
<br><br>
<input id="input2">

This substitutes border for outline. It's still accessible, but border respects border-radius.

thanks for your help, your comment on "border, box-shadow" is a good point. I've only started learning, and did not know about the focus indicator, thanks for pointing that out to me. — rickyc, Nov 18 '20 at 23:43

score 0 · Answer 2 · 2020-11-19T01:13:56.113

0

Try this:

input {
  border-radius: 5px;
 }
input:focus {
  outline-width: 0;
 }

<input>

As @AlexH pointed out, you could also add other things to the input: focus to make it more accessible.

Example:

input{
  border-radius: 5px;
  outline: none;
}

input:focus{
  border: 2px solid red;
  border-radius: 10px;
}

<input>

Making it clean:

You can use @keyframes for an even better transition, and transitions, as they last longer, might be a more effective tool for accessibility (in my experience)

input{
  border-radius: 5px;
  border: 1px solid black;
}

input:focus{
  animation: input 0.5s forwards;
  border-radius: 7px;
  border: 2px solid #55555;
  outline: none;
}

@keyframes input{
  from{
    border-radius: 5px;
    border: 1px solid black;
  }
  to{
    border-radius: 9px;
    border: 1px solid #555555;
  }
}

<input>

edited Nov 19 '20 at 01:13

answered Nov 18 '20 at 22:18

Removing `outline` and not adding a focus indicator is bad for accessiblity. – AlexH Nov 18 '20 at 22:19
@AlexH what do you mean. It answered the question. This was the exact answer from [here](https://stackoverflow.com/questions/1457849/how-to-remove-the-border-highlight-on-an-input-text-element) – Nov 18 '20 at 22:20
Someone who uses the tab key to navigate a page (potentially because of a vision impairment) would not know where they are. They would have difficulty navigating the page and might get lost. – AlexH Nov 18 '20 at 22:21
@AlexH yes, you could also add a number of other things. All I did was answer the question – Nov 18 '20 at 22:22
That's correct. But it's important to point out things like this so the OP doesn't unknowingly make a mistake. That's the difference between an answer and a *good* answer--an answer addresses the question, but a good answer addresses the problem. The distinction between problem and question is an important one. – AlexH Nov 18 '20 at 22:26
(Also, [this](https://www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/) is a link that explains more about outlines and accessibility) – AlexH Nov 18 '20 at 22:26
@AlexH Thank you, I added more to my post – Nov 18 '20 at 22:29
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/224758/discussion-between-alexh-and-haveproblemseveryday). – AlexH Nov 18 '20 at 22:29
Thank you both so much for your help! I did not even take into account accessibility, and will remember to in the future. – rickyc Nov 18 '20 at 23:48

Rounded input text box, but square selection box appears

2 Answers2