Adds ms-placeholder values #2074

RELEASE-NOTES.md

@@ -27,11 +27,13 @@
 - **Build Tools** - Adjusting `site.variables` will now rebuild all UI, instead of just `site.less`
 - **Divider** - `vertical divider` inside `ui grid` now accounts for column padding
 - **Dropdown** - Dropdowns now automatically observe changes in `menu` and will update selector cache with new additions
+- **Form** - Added placeholder color rules for IE, `ms-input-placeholder`
 - **Form Validation** - Form validation now has `minCount`, `maxCount`, and `exactCount` for validating multiple selections
 - **Grid** - `celled grid` now removes internal cells on mobile and tablet when used with `doubling` grid responsive variation
 - **Grid** - `equal width` now works without `row` wrappers
 - **Grid** - rows can now be `stretched` as well as `middle aligned`, `bottom aligned` and `top aligned`!
 
+- **Input** - Added placeholder color rules for IE, `ms-input-placeholder`
 - **Label** - Labels now have `active` and `active hover` states
 - **Menu** - Added `stackable` menu variation for simple responsive menus
 - **Menu** - Added many new variables to menu

src/definitions/collections/form.less

@@ -266,12 +266,19 @@
 .ui.form ::-webkit-input-placeholder {
   color: @inputPlaceholderColor;
 }
+.ui.form ::-ms-input-placeholder {
+  color: @inputPlaceholderColor;
+}
 .ui.form ::-moz-placeholder {
   color: @inputPlaceholderColor;
 }
+
 .ui.form :focus::-webkit-input-placeholder {
   color: @inputPlaceholderFocusColor;
 }
+.ui.form :focus::-ms-input-placeholder {
+  color: @inputPlaceholderFocusColor;
+}
 .ui.form :focus::-moz-placeholder {
   color: @inputPlaceholderFocusColor;
 }
@@ -280,12 +287,19 @@
 .ui.form .error ::-webkit-input-placeholder {
   color: @inputErrorPlaceholderColor;
 }
+.ui.form .error ::-ms-input-placeholder {
+  color: @inputErrorPlaceholderColor;
+}
 .ui.form .error ::-moz-placeholder {
   color: @inputErrorPlaceholderColor;
 }
+
 .ui.form .error :focus::-webkit-input-placeholder {
   color: @inputErrorPlaceholderFocusColor;
 }
+.ui.form .error :focus::-ms-input-placeholder {
+  color: @inputErrorPlaceholderFocusColor;
+}
 .ui.form .error :focus::-moz-placeholder {
   color: @inputErrorPlaceholderFocusColor;
 }

src/definitions/elements/input.less

@@ -60,12 +60,16 @@
 ---------------------*/
 
 /* browsers require these rules separate */
-.ui.input input::-webkit-input-placeholder {
+
+.ui.input input::input-placeholder {
   color: @placeholderColor;
 }
 .ui.input input::-moz-placeholder {
   color: @placeholderColor;
 }
+.ui.input input::-ms-input-placeholder {
+  color: @placeholderColor;
+}
 
 
 /*******************************
@@ -143,6 +147,11 @@
 .ui.input input:focus input::-moz-placeholder {
   color: @placeholderFocusColor;
 }
+.ui.input.focus input::-ms-input-placeholder,
+.ui.input input:focus input::-ms-input-placeholder {
+  color: @placeholderFocusColor;
+}
+
 
 
 /*--------------------
@@ -163,6 +172,9 @@
 .ui.input.error input ::-moz-placeholder {
   color: @placeholderErrorColor;
 }
+.ui.input.error input ::-ms-input-placeholder {
+  color: @placeholderErrorColor;
+}
 
 /* Focused Error Placeholder */
 .ui.input.error input :focus::-webkit-input-placeholder {
@@ -171,6 +183,9 @@
 .ui.input.error input :focus::-moz-placeholder {
   color: @placeholderErrorFocusColor;
 }
+.ui.input.error input :focus::-ms-input-placeholder {
+  color: @placeholderErrorFocusColor;
+}
 
 /*******************************
            Variations
@@ -202,9 +217,6 @@
 }
 
 /* Transparent Inverted */
-.ui.transparent.inverted.input input::-moz-placeholder {
-  color: @transparentInvertedPlaceholderColor;
-}
 .ui.transparent.inverted.input {
   color: @transparentInvertedColor;
 }
@@ -212,6 +224,16 @@
   color: inherit;
 }
 
+.ui.transparent.inverted.input input::-webkit-input-placeholder {
+  color: @transparentInvertedPlaceholderColor;
+}
+.ui.transparent.inverted.input input::-moz-placeholder {
+  color: @transparentInvertedPlaceholderColor;
+}
+.ui.transparent.inverted.input input::-ms-input-placeholder {
+  color: @transparentInvertedPlaceholderColor;
+}
+
 
 /*--------------------
          Icon