Placeholder color for textareas, replaced legacy properties with `::placeholder`
authorAlexander Ebert <ebert@woltlab.com>
Wed, 26 Jan 2022 18:16:15 +0000 (19:16 +0100)
committerAlexander Ebert <ebert@woltlab.com>
Wed, 26 Jan 2022 18:16:15 +0000 (19:16 +0100)
See https://www.woltlab.com/community/thread/292757-unterschiedliche-placeholder-farben/

wcfsetup/install/files/style/layout/form.scss

index 1b7d5a622da757b8584bc7a5b3127148ae9417ed..6c9de433c648978df91b32950e7fa91ee8df5cdd 100644 (file)
@@ -23,31 +23,11 @@ input[type="search"],
 input[type="tel"],
 input[type="text"],
 input[type="url"] {
-       &::-webkit-input-placeholder {
-               /* WebKit browsers */
+       &::placeholder {
                color: $wcfInputPlaceholder;
-       }
-       &::-moz-placeholder {
-               /* Mozilla Firefox 19+ */
-               color: $wcfInputPlaceholder;
-       }
-       &:-ms-input-placeholder {
-               /* Internet Explorer 10+ */
-               color: $wcfInputPlaceholder;
-       }
 
-       &:focus,
-       &:hover {
-               &::-webkit-input-placeholder {
-                       /* WebKit browsers */
-                       color: $wcfInputPlaceholderActive;
-               }
-               &::-moz-placeholder {
-                       /* Mozilla Firefox 19+ */
-                       color: $wcfInputPlaceholderActive;
-               }
-               &:-ms-input-placeholder {
-                       /* Internet Explorer 10+ */
+               &:focus,
+               &:hover {
                        color: $wcfInputPlaceholderActive;
                }
        }
@@ -60,6 +40,15 @@ input[type="url"] {
        }
 }
 
+textarea::placeholder {
+       color: $wcfInputPlaceholder;
+
+       &:focus,
+       &:hover {
+               color: $wcfInputPlaceholderActive;
+       }
+}
+
 input[type="search"],
 input[type="text"] {
        -webkit-appearance: none;