CODEWITHSUNDEEP
javascripthtmlcss
RagingBull
RagingBull

Reputation: 57

How to change the border of an element when selected?

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>

Upvotes: 2

Views: 2285

Answers (3)

SW4
SW4

Reputation: 71140

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>

Upvotes: 2

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

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>

Upvotes: 2

Alex Char
Alex Char

Reputation: 33218

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>

Upvotes: 4

Related Questions