Created
July 2, 2016 12:05
-
-
Save xto3na/1db9a0abac1c21d51050407f83e09e57 to your computer and use it in GitHub Desktop.
Placeholder styling css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* цвет */ | |
input::-webkit-input-placeholder {color:#001e5d;} | |
input::-moz-placeholder {color:#001e5d;}/* Firefox 19+ */ | |
input:-moz-placeholder {color:#001e5d;}/* Firefox 18- */ | |
input:-ms-input-placeholder {color:#001e5d;} | |
/* скрытие при фокусе */ | |
input:focus::-webkit-input-placeholder {color: transparent} | |
input:focus::-moz-placeholder {color: transparent} | |
input:focus:-moz-placeholder {color: transparent} | |
input:focus:-ms-input-placeholder {color: transparent} | |
/* троеточие */ | |
input[placeholder] {text-overflow:ellipsis;} | |
input::-moz-placeholder {text-overflow:ellipsis;} | |
input:-moz-placeholder {text-overflow:ellipsis;} | |
input:-ms-input-placeholder {text-overflow:ellipsis;} | |
/* плавное изменение прозрачности placeholder-а при фокусе */ | |
.input1::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} | |
.input1::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} | |
.input1:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} | |
.input1:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} | |
.input1:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} | |
.input1:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} | |
.input1:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} | |
.input1:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} | |
/* сдвиг placeholder-а вправо при фокусе*/ | |
.input2::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} | |
.input2::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} | |
.input2:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} | |
.input2:-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} | |
.input2:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} | |
.input2:focus::-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} | |
.input2:focus:-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} | |
.input2:focus:-ms-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} | |
/* сдвиг placeholder-а вниз при фокусе*/ | |
.input3::-webkit-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;} | |
.input3::-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;} | |
.input3:-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;} | |
.input3:-ms-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;} | |
.input3:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;} | |
.input3:focus::-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} | |
.input3:focus:-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} | |
.input3:focus:-ms-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment