10

I am trying to set outline width of the input element on focus. Outline width stays the same (like it is default setting which can not be changed), no matter of my setting.

Here is example from code pen

And here is part from css where I am trying to set outline-width on focus:

input:focus {
  outline-width: 0.1px;
  outline-color: #725b44;  
}

EDIT:

I've just forgotten to include line style (solid, dotted...). Now it works. One thing is still strange to me. Why is outline inside element? Isnt' the outline defined as 'a line that is drawn around elements (outside the borders) to make the element "stand out".'

Here from my example outline looks like this. I thought it's going to be around element, but it's inside:

enter image description here

4
  • 3
    Exactly what would 0.1px look like? Most broswers will either not show it or round it up to 1px.
    – Paulie_D
    Commented Aug 10, 2016 at 13:26
  • What if I want 3px? It doesn't work if I set 3px. Width stays the same.
    – FrenkyB
    Commented Aug 10, 2016 at 13:27
  • 2
    Use outline:1px solid #725b44;
    – Nick R
    Commented Aug 10, 2016 at 13:28
  • 2
    Works for me if I put outline-width: 3px; Also, easier to use this syntax: outline: 9px solid blue;
    – Ignacio
    Commented Aug 10, 2016 at 13:30

5 Answers 5

21

Add outline-style: solid to your css.

Since the default style for the outline-style property is none, you will have to set it as well (none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit). Best value you can use for the style is solid, but that's a matter of preference.

Example for the behavior:

input {
  font-size: 22px;
  padding: 5px 3px;
  color: #666;
}

input.with-outline-style:focus {
  outline-width: 3px;
  outline-style: solid;
  outline-color: #725b44;
  /* You could also use the shorthand: */
  /* outline: 3px solid #666; */
  /*       width style color */
}

input.without-outline-style:focus {
  outline-width: 3px;
  outline-color: #725b44;
}

body {
  background-color: #fd9;
}

div {
  padding: 5px 10px;
}
<div>
  <input type="text" class="with-outline-style" value="outline-style set to solid" />
</div>

<div>
  <input type="text" class="without-outline-style" value="outline-style not set" />
</div>

Update

The outline-width setting doesn't work without specifying outline-style: if no outline style is set, the browser will render the outline in its default style (which could be anything, such as a dotted rectangle in IE, a shaded rectangle in Chrome, or even nothing).

2
  • Why outline-width doesn't work without specifying the outline style?
    – diralik
    Commented Feb 12, 2018 at 14:41
  • 1
    Because the default outline style is none. If you don't specify the style, the browser will render the outline in its default style (which could be anything, such as a dotted rectangle in IE, a shaded rectangle in Chrome, or even nothing).
    – beerwin
    Commented Feb 13, 2018 at 13:23
2

Use outline-style

input:focus {
  outline-width: 0.1px;
  outline-color: #725b44;  
  outline-style: dotted;
}
1

Only if you specify outline-style the outline-width will take effect. Please check and let me know your feedback. Thanks!

snippet below:

.divMain {
  height: 100vh;
  width: 100vw;
  border: 0px solid black;
}
.divLogin {
  position: absolute;
  left: 20%;
  top: 5%;
  width: 300px;
  height: 600px;
  border: 1px solid #CF6B08;
  border-radius: 3px;
}
#divLogin {
  background: #FFCC99;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#FAC28A, #FFCC99);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#FAC28A, #FFCC99);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#FAC28A, #FFCC99);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#FAC28A, #FFCC99);
  /* Standard syntax */
}
.spanTitle {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 20px;
  color: #003399;
  font-weight: bold;
}
.inputFirst {
  position: absolute;
  top: 50px;
  margin-left: 5px;
  width: calc(100% - 10px);
  height: 30px;
}
.divWarningInputFirst {
  position: absolute;
  width: calc(100% - 10px);
  height: 30px;
  top: 88px;
  margin-left: 5px;
  border: 0px solid black;
  background-color: #fcdcbb;
  color: #ff0000;
  font-weight: bold;
  padding-top: 5px;
  padding-left: 5px;
}
.divWarningInputFirst:after {
  content: "";
  position: absolute;
  top: -5px;
  left: 8px;
  border-style: solid;
  border-width: 0 5px 6px;
  border-color: #fcdcbb transparent;
  display: block;
  width: 0;
  z-index: 1;
}
input:focus {
  outline-width: 3px;
  outline-style: solid;
  outline-color: #725b44;
}
input {
  border-color: transparent;
  padding-left: 3px;
  box-sizing: border-box;
}
<div id="divMain" class="divMain">

  <div id="divLogin" class="divLogin">

    <span id="spanTitle" class="spanTitle">Login</span>

    <input type="text" id="inputFirst" class="inputFirst" placeholder="input first">



    <div id="divWarningInputFirst" class="divWarningInputFirst">Please enter input first</div>

  </div>



</div>

1

Try

outline: 3px solid #725b44;

or

outline-width:3px;
outline-color:#725b44;
outline-style:solid;

.divMain {
  height: 100vh;
  width: 100vw;
  border: 0px solid black;
}
.divLogin {
  position: absolute;
  left: 20%;
  top: 5%;
  width: 300px;
  height: 600px;
  border: 1px solid #CF6B08;
  border-radius: 3px;
}
#divLogin {
  background: #FFCC99;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#FAC28A, #FFCC99);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#FAC28A, #FFCC99);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#FAC28A, #FFCC99);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#FAC28A, #FFCC99);
  /* Standard syntax */
}
.spanTitle {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 20px;
  color: #003399;
  font-weight: bold;
}
.inputFirst {
  position: absolute;
  top: 50px;
  margin-left: 5px;
  width: calc(100% - 10px);
  height: 30px;
}
.divWarningInputFirst {
  position: absolute;
  width: calc(100% - 10px);
  height: 30px;
  top: 88px;
  margin-left: 5px;
  border: 0px solid black;
  background-color: #fcdcbb;
  color: #ff0000;
  font-weight: bold;
  padding-top: 5px;
  padding-left: 5px;
}
.divWarningInputFirst:after {
  content: "";
  position: absolute;
  top: -5px;
  left: 8px;
  border-style: solid;
  border-width: 0 5px 6px;
  border-color: #fcdcbb transparent;
  display: block;
  width: 0;
  z-index: 1;
}
input:focus {
  outline: 3px solid #725b44;

}
input {
  border-color: transparent;
  padding-left: 3px;
  box-sizing: border-box;
}
<div id="divMain" class="divMain">
  
  <div id="divLogin" class="divLogin">
    
    <span id="spanTitle" class="spanTitle">Login</span>
    
    <input type="text" id="inputFirst" class="inputFirst" placeholder="input first">
    
    
    
    <div id="divWarningInputFirst" class="divWarningInputFirst">Please enter input first</div>
    
  </div>
  
  
  
</div>

This might help you!

0

You should add 1px instead of 0.1px with outline-style

input:focus {
  outline:1px solid #725b44;  
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.