How to change the border of an element when selected?

Question

I have a query and have tried to do some research but i am having trouble even trying to google what i am looking for and how to word it. Currently each div has a label and then an input field. i have made all these input fields with rounded edges. my problem is when i click in the chosen area a rectangular border appears around the edge. the image can be viewed here: http://www.tiikoni.com/tis/view/?id=6128132

how can i change the appearance of this border?

This is is my css code:

    div input{
     border: 2px solid #a1a1a1;
        padding: 10px 40px; 
        background: #dddddd;
        width: 300px;
        border-radius: 25px;
    }

This is part of my html:

<div class="fourth">
        <label> Confirm Password: </label>
        <input type="text" name="cPassword" class="iBox"  id="cPassword" onkeyup="passwordValidation()" placeholder="confirm it!" autocomplete="off">
        <p id="combination"></p>
    </div>

It is not a border but an outline, so you can style it using the `outline` property. But you are not saying *how* it should be changed. Removing it, changing its color etc. easy. Setting rounded corners is not, see http://stackoverflow.com/questions/5394116/outline-radius — Jukka K. Korpela, Jan 26 '15 at 10:45
@JukkaK.Korpela thanks. is it easy to set round corners as a different colour when selected?all the jsfiddles in the answers to the questions above do not seem to have borders that change colours once clicked — RagingBull, Jan 26 '15 at 10:56
@RagingBull - updated the example to do that: http://stackoverflow.com/a/28148449/404335 — SW4, Jan 26 '15 at 11:42

Alex Char · Accepted Answer · 2015-01-26T10:46:59.677

4

One solution is to remove default outline on focus using:

div input:focus{
    outline: none;
}

   div input {
     border: 2px solid #a1a1a1;
     padding: 10px 40px;
     background: #dddddd;
     width: 300px;
     border-radius: 25px;
   }
   div input:focus {
     outline: none;
   }

<div class="fourth">
  <label>Confirm Password:</label>
  <input type="text" name="cPassword" class="iBox" id="cPassword" onkeyup="passwordValidation()" placeholder="confirm it!" autocomplete="off" />
  <p id="combination"></p>
</div>

edited Jan 26 '15 at 10:46

answered Jan 26 '15 at 10:32

Alex Char

32,879
9
49
70

@AlexChar I also have not voted down, but your code snippet will not work, Im running in Firefox 35.0 – Master Yoda Jan 26 '15 at 10:44
1

This answer assumes that “change” means “remove” in the question. Removing an outline is guaranteed to cause usability and accessibility problems. – Jukka K. Korpela Jan 26 '15 at 10:47
@Teemu removed it but i prefer to close `input` in any case. – Alex Char Jan 26 '15 at 10:47
@AlexChar Ah you may be right actually. Just read the question again. – Master Yoda Jan 26 '15 at 10:51
I've not downvoted this, but this won't work in most modern browsers. This is because these days the input:focus is set using a box-shadow rather than an outline. To make this work, add this: div input:focus { outline: none; box-shadow: none !important; } And, yes, you need the !important – Midiman Oct 18 '22 at 17:17

SW4 · Answer 2 · 2015-01-26T11:41:44.910

This is the outline property and can be set in the same way as a border, it is typically assigned for the :focus state of suitable elements, it can also be set to none

More on outline from MDN

The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single declaration. In most cases the use of this shortcut is preferable and more convenient.

More on :focus from MDN

The :focus CSS pseudo-class is applied when a element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input).

It is also interesting to note that by adding the tabindex attribute to elements (such as div) you can also enable styling of the :focus state.

 div input {
   border: 2px solid #a1a1a1;
   padding: 10px 40px;
   background: #dddddd;
   width: 300px;
   border-radius: 25px;
 }
 input:focus {
   outline: none;
   border-color:red;
 }

<div class="fourth">
  <label>Confirm Password:</label>
  <input type="text" name="cPassword" class="iBox" id="cPassword" onkeyup="passwordValidation()" placeholder="confirm it!" autocomplete="off" />
  <p id="combination"></p>
</div>

this is great, thanks. would vote up but not enough rep im afraid. — RagingBull, Jan 26 '15 at 12:23

score 2 · Answer 3 · edited May 23 '17 at 12:28

It is not a border but an outline, so you can style it using the outline property. But things depend on how it should be changed. Removing it, changing its color is etc. easy; but setting rounded corners is not (you can only fake it), see Outline radius?

Simply removing the outline is bad for usability and accessibility, since the outline, “focus rectangle”, shows the user where the focus us. You might consider compensating for this by using some other way of indicating the focus. One simple possibility is to change the border color or style or both. So when focused, the element does not get an outline but its border changes so that it resembles the focus rectangle. The following illustrates the techniques and makes the focus rather apparent; tune to fit your overall design:

  div input{
     border: 2px solid #a1a1a1;
        padding: 10px 40px; 
        background: #dddddd;
        width: 300px;
        border-radius: 25px;
     }
  div input:focus {
        outline: none;
        border-color: red;
        background: #ffd;
     }

<div class="fourth">
        <label for="cPassword"> Confirm Password: </label>
        <input type="text" name="cPassword" class="iBox"  id="cPassword" onkeyup="passwordValidation()" placeholder="confirm it!" autocomplete="off">
        <p id="combination"></p>
</div>

this is great, thanks. would vote up but not enough rep im afraid. — RagingBull, Jan 26 '15 at 12:23

How to change the border of an element when selected?

3 Answers3