Form_design_from_Netflix.pdf

 Form_design_from_Netflix.pdf

78d138a74c8135fe40735a286a71f4c7?s=128

IMANISHI TOSHIFUMI

February 25, 2020
Tweet

Transcript

  1. 5.

    ϑϩʔτϥϕϧ͸$44Ͱ࣮૷Ͱ͖Δ <div class="p-floatlabel"> <input class="p-floatlabel_textfield" type=“text" required> <label class="p-floatlabel_placeholder">ϝʔϧΞυϨε·ͨ͸ܞଳి࿩൪߸</label> </div>

    HTML SCSS .p-floatlabel { position: relative; } .p-floatlabel_placeholder { position: absolute; top: 50%; pointer-events: none; .p-floatlabel_textfield:focus ~ &, .p-floatlabel_textfield:valid ~ & { top: 0; } } GPDVTٖࣅΫϥεͷ͋ͱͷҰൠܑఋ݁߹ࢠͰηϨΫλΛࢦఆ͢Δɻ ೖྗޙɺWBMJEٖࣅΫϥεͰελΠϧΛݻఆ͢Δɻ