Why does this transition only work with no outline?-CodePudding

input {
  border: 3px solid #FFEFD5;
  width: 300px;
  padding: 10px;
  outline: none;
  transition: 0.5s;
}

input:focus {
  border: 3px solid #CD853F;
}

<form>
  <input type="text" id="email" name="email" value="Click Here!">
</form>

If i delete the outline setting, the transition doesn't work. Why does this happen? Please let me know. Thank you.

CodePudding user response：

Just add box-sizing: border-box; in the main class and add a custom outline in the focus class.

input {
  border: 3px solid #FFEFD5;
  width: 300px;
  padding: 10px;
  transition: 0.5s;
  box-sizing: border-box;
  outline: none;
}

input:focus {
  outline: 2px solid #FF0000; /* Your Custom Outline Here */
  border: 3px solid #CD853F;
}

CodePudding user response：

it's because to have some kind of transition you have to set the initial and final properties for it in your case if you delete the border in your main element the initial condition gets deleted.

So, the solution is to make the initial condition not visible so you have some property but it's not visible in your condition making border thickness 0px or making your border color to transparent.

I have attached both solutions.

input {
  border: 0 solid #FFEFD5;
  width: 300px;
  padding: 10px;
  outline: none;
  transition: 0.5s;
}

input:focus {
  border: 3px solid #CD853F;
}

<form>
  <input type="text" id="email" name="email" value="Click Here!">
</form>

input {
  border: 3px solid transparent;
  width: 300px;
  padding: 10px;
  outline: none;
  transition: 0.5s;
}

input:focus {
  border: 3px solid #CD853F;
}

<form>
  <input type="text" id="email" name="email" value="Click Here!">
</form>