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 to change width to fill the remaining space (CSS)

    How to isolate text in a

    tag to bold without changing the format of remaining paragraph

    How to adapt height of an element to another in CSS

    How to morph a plus sign to a minus sign using css transition?

    How do I add a css class to an Div element in JQuery?

    How to change the text my button displays?

    CSS question: how to remove the border from an image in WordPress

    How to make equal space between boxes in one row via CSS

    How can I make this menu's “clear:both” work in Google Chrome?

    How to center child divs along each side of a parent div

    css: how to remove pseudo elements (after, before, …)

    Website elements go haywire when the user zooms in or out. How do I keep them from moving?

    How can I achieve float left at bottom and float right at top with css flexbox?

    How to place a color cover on top of an image in CSS

    how to remove 2nd 0r 4th div padding with Pure CSS not jquery

    how to apply the css style only to child

    Wordpress how to tell my css version

    How to change placeholder color in css

    How to align colon vertically using css?

    How to make a div next to each other in CSS

    How do I implement a MailChimp API form embed?

    How do you switch the cursor to a pointer cursor when hovering over the bars in a Kendo UI bar chart

    css: how to inherit whole class

    How to properly separate pages in jQuery Mobile?

    How to create overlaying papers (pile) - CSS / HTML

    Vertical centering images within a slideshow using JS code?

    How to stretch segment of image in html/css

    How to center the Nav-Bar

    How to center a Dijit Select widget?

    JQuery: how to make this variable negative before declaring it as a CSS value?