Reputation: 362
I'd like to create an input box and style it with border.
To do this I need to do input:focus
, then I did it I don't know how to move on.
If I want to change the background's transition then I do transition: background Xs;
or -webkit-transition: background Xs;
.
I've made a search and I didn't found anything that could help me.
Thanks.
Upvotes: 0
Views: 296
Reputation: 413
input:focus {
border: 5px solid red;
background: blue;
}
input {
transition: border 1s, background 2s;
}
Remove what you don't need, border or background ;) You must specify transition in the element itself, and the desired effect in :focus.
Upvotes: 1
Reputation: 128856
Your current transition only applies to the element's background
, not the border
. Either change "background" to "border", remove "background" completely or add in "border" alongside your background:
input {
border: 1px solid #bbb;
transition: background 0.2s, border 0.2s;
}
input:focus {
border-color: tomato;
}
Upvotes: 1