Removing Form Field Selection Properties In CSS

[cmcp]

I am pretty new to CSS and I'm using it to style a basic HTML form with 2 form fields and a submit button. By default, when the form fields (and submit button) are selected (using the Tab button) they are "highlighted" by a thick black border. How can this attribute be removed so that it doesn't show (or at least be changed to a different color). The only thing that should show is the original color of the field borders. I've added my CSS settings below:

.p {
  font-family: "Garamond", Times, serif;
  font-size: 12pt;
}

input[type=text] {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  color: #0066CC;
  background-color: #F2F8FF;
  width: 55%;
  padding: 2px 5px;
  margin: 2px 0;
  border: 1px solid #319CE7;
  border-radius: 1px;
  box-sizing: border-box;
}

input[type=password] {
  text-align: center;
  color: #166AA9;
  font-weight: bold;
  color: #0066CC;
  background-color: #F2F8FF;
  width: 55%;
  padding: 2px 5px;
  margin: 2px 0;
  border: 1px solid #319CE7;
  border-radius: 1px;
  box-sizing: border-box;
}

input[type=submit] {
  background-image: url("images/buttons/ok.gif");
  background-repeat: no-repeat;
  border: 0px none transparent;
  color: transparent;
  font-weight: none;
  padding: 6px 12px;
  cursor: not-allowed;
}

Any help you can give would be appreciated.

 

[Johna]

Hey there,
The CSS :focus pseudo-class is what you're looking for.

input:focus {
  outline: none;            /* completely remove the outline */
  outline: 2px dashed red;  /* replace the default black outline with a 2px dashed red outline */
}

It is, however, considered bad practice to completely remove the outline when focused, for accessibility reasons.

 

[cmcp]

<style>

.p {
font-family: "Garamond", Times, serif;
font-size: 12pt;
}

input[type=text] {
text-align: center;
text-transform: uppercase;
font-weight: bold;
color: #0066CC;
background-color: #F2F8FF;
width: 55%;
padding: 2px 5px;
margin: 2px 0;
border: 1px solid #319CE7;
border-radius: 1px;
box-sizing: border-box;
}

input[type=password] {
text-align: center;
color: #166AA9;
font-weight: bold;
color: #0066CC;
background-color: #F2F8FF;
width: 55%;
padding: 2px 5px;
margin: 2px 0;
border: 1px solid #319CE7;
border-radius: 1px;
box-sizing: border-box;
}

input[type=submit] {
background-image: url("images/buttons/ok.gif");
background-repeat: no-repeat;
border: 0px none transparent;
color: transparent;
font-weight: none;
padding: 6px 12px;
cursor: not-allowed;
}

Hey there,
The CSS :focus pseudo-class is what you're looking for.

input:focus {
  outline: none;            /* completely remove the outline */
  outline: 2px dashed red;  /* replace the default black outline with a 2px dashed red outline */
}

It is, however, considered bad practice to completely remove the outline when focused, for accessibility reasons.

That was just what I needed. Thanks a lot!