Стилизация placeholder — стили текста, исчезновение при клике
Плавное изменение прозрачности:
1 2 3 4 5 6 7 8 | input::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} input::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} input:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} input:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} input:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} input:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} input:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} input:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} |
Сдвиг вправо (может не полностью прятаться текст плейсхолдера на длинных полях сайта, например поиске — меняйте значение 500 на более подходящее для конкретного проекта):
1 2 3 4 5 6 7 8 | input::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input:-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} input:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} input:focus::-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} input:focus:-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} input:focus:-ms-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} |
Сдвиг вниз:
1 2 3 4 5 6 7 8 | input::-webkit-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;} input::-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;} input:-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;} input:-ms-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;} input:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;} input:focus::-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} input:focus:-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} input:focus:-ms-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;} |
Поделиться Страницей
Может Пригодиться
