How to change the border of an element when selected?


Tags: javascript,html,css

Problem :

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>


Solution :

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>


    CSS Howto..

    How do I apply padding or a margin to this heading displayed as a table-cell?

    How to use :hover for one element and chnage another class css proprties

    How can I change GWT's widget CSS values?

    How to create round plus minus using css?

    how to make edges of a line fade out?

    How to add border to circular image on hover? css or jquery

    how to create Active State in CSS Navigations

    How to give effect on dragging in css or through jquery

    How do I detect a transition end without a JavaScript library?

    how to have the text under the logo css

    How do you hide and show a background image using a carousel?

    CSS: how to cascade class-specific style to children [closed]

    How to modify the CSS Properties (height width) of a div element via JQuery?

    How can I get as much of the text into a DIV row as possible?

    How to add CSS style to focused anchor in HTML

    CSS height, How to get it to go around inner divs

    Menu hover effect - how to reproduce this effect?

    How do i use floats for images while using
    so that
    still shows under image?

    How to refer to an id with special characters in CSS

    How to apply multiple CSS selectors to a paticular div?

    How to remove/ignore :hover css style on touch devices

    How to solve Firefox 2.0 cross browser issues?

    How to use “Monotype Corsiva” font in CSS statement?

    How do I fix hover property of a div?

    How to change css file for this aim?

    How to make a blur effect over a shape in CSS?

    How to add fade in and fade out when changing between texts in javascript

    How to auto adjust parent DIV height according to the contents in child DIV?

    How to toggle single element with this same class like another

    How to add css files to a custom module in Odoo 8?