search

italia / design-web-toolkit

Questa libreria è deprecata, si consiglia l'utilizzo di Bootstrap Italia (https://italia.github.io/bootstrap-italia/)
Creative Commons Zero v1.0 Universal
93 stars 87 forks source link

Form-field--withPlaceholder #78

Closed jsb81 closed 7 years ago

jsb81 commented 7 years ago

Sto cercando di creare delle form con la label impostata come placeholder nelle input fields. Il problema è che questa viene visualizzata solamente se l'input field viene impostata come required. Questo perché è impostata la seguente regola nel css:

.Form-field--withPlaceholder .Form-input:focus + .Form-label, .Form-field--withPlaceholder .Form-input:valid + .Form-label { opacity: 0; }

Qualcuno ha trovato una soluzione a questo "problema"?

Grazie.

gunzip commented 7 years ago

la regola serve a evitare che la label venga mostrata sovrapposta al valore del testo immesso nel campo di input quando questo perde il focus: https://css-tricks.com/float-labels-css/#article-header-id-3

in sostanza, si può anche levare l'attributo required, dopodiché è necessario introdurre del javascript per nascondere la label quando il campo di input è valorizzato

jsb81 commented 7 years ago

Ok risolvo con un js. Grazie