2

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>
Improve this question
3
  • 1
    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 stackoverflow.com/questions/5394116/outline-radius Commented Jan 26, 2015 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 Commented Jan 26, 2015 at 10:56
  • @RagingBull - updated the example to do that: stackoverflow.com/a/28148449/404335 Commented Jan 26, 2015 at 11:42

3 Answers 3

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

@AlexChar I also have not voted down, but your code snippet will not work, Im running in Firefox 35.0
This answer assumes that “change” means “remove” in the question. Removing an outline is guaranteed to cause usability and accessibility problems.
@Teemu removed it but i prefer to close input in any case.
@AlexChar Ah you may be right actually. Just read the question again.
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
2

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>

Improve this answer

1 Comment

this is great, thanks. would vote up but not enough rep im afraid.
2

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>

Improve this answer

1 Comment

this is great, thanks. would vote up but not enough rep im afraid.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.