CODEWITHSUNDEEP
css
rolory
rolory

Reputation: 362

CSS border transition

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

Answers (2)

Holybreath
Holybreath

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

James Donnelly
James Donnelly

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

Related Questions