Hogyan tudnám megcsinálni? (html/css/esetleg js (? ) )
Létrehoztam egy input text-et, és hozzá a CSS-t. így néz most ki:
HTML:
<input type="text" placeholder="Név"/>
CSS:
input[type="text"] {
padding: 10px;
border: none;
border-bottom: solid 2px #c9c9c9;
transition: border 0.3s;
}
input[type="text"]:hover {
border-bottom: solid 2px #848484;
outline: none;
transition: 0.3s;
}
input[type="text"]:focus {
border-bottom: solid 2px #00BFFF;
outline: none;
transition: 0.3s;
}
***
És azt szeretném megoldani, hogy amikor bele nyomok az inputba, akkor a csík balról jobbra töltődjön fel. (tehát a transition jobbról balra induljon el.) Hogy nézne ez ki kódban?
válasza:Ez egy kicsit trükkösebb, de megoldható. Hozz létre egy :after pseudo elementet, és annak ne a border-jét, hanem a width-jét állítsad. Gyakorlatilag kirajzolsz egy dobozt.
input[type=text]:after {
display: block;
content: '';
position: absolute;
width: 0;
height: 1px;
left: 0;
bottom: -12px;
background: #000;
transition: 0.3s;
}
input[type=text]:hover:after {
width: 100%
}
Valahogy így. Értelem szerűen a bottom értéke a szöveg magasságának függvénye.
válasza:Most jól beégtem, utána néztem és input[type=text]-re nem működik az :after. Akkor marad a kézi megoldás: az input egy wrapperbe kerül, és az input után a fában jön egy elem ami az aláhúzás lesz majd.
Pár perc és összerakom és elküldöm.
válasza: válasza:Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!