diff --git a/formhack.css b/formhack.css index 397680b..f574dae 100644 --- a/formhack.css +++ b/formhack.css @@ -23,6 +23,9 @@ --fh-focus-border-color: var(--fh-border-color); --fh-focus-font-color: var(--fh-font-color); + /* Inputs Vendor Styling */ + --fh-input-vendor-styling: none; /* comment this out to maintain vendor styling */ + /* Select Vendor Styling */ --fh-select-vendor-styling: none; /* comment this out to maintain vendor styling */ @@ -131,6 +134,24 @@ input[list] { -webkit-appearance: none; } +/* Fields with standard height */ +input[type="text"]::-ms-clear, +input[type="email"]::-ms-clear, +input[type="password"]::-ms-reveal, +input[type="search"]::-ms-clear, +input[type="color"]::-ms-clear, +input[type="date"]::-ms-clear, +input[type="datetime-local"]::-ms-clear, +input[type="month"]::-ms-clear, +input[type="number"]::-ms-clear, +input[type="tel"]::-ms-clear, +input[type="time"]::-ms-clear, +input[type="url"]::-ms-clear, +input[type="week"]::-ms-clear, +input[list]::-ms-clear { + display: var(--fh-input-vendor-styling); +} + /* Other */ textarea { diff --git a/formhack.sass b/formhack.sass index 115d42c..1c02a2b 100644 --- a/formhack.sass +++ b/formhack.sass @@ -22,6 +22,9 @@ $fh-focus-bg-color: rgb(220, 220, 220) !default $fh-focus-border-color: $fh-border-color !default $fh-focus-font-color: $fh-font-color !default +// Inputs Vendor Styling +$fh-allow-input-vendor-styling: true !default + // Select Vendor Styling $fh-allow-select-vendor-styling: true !default @@ -126,6 +129,9 @@ input[type="week"], input[list] height: $fh-input-height -webkit-appearance: none + @if $fh-allow-input-vendor-styling == false + &::-ms-clear, &::-ms-reveal + display: none /* Other */ diff --git a/formhack.scss b/formhack.scss index 9e34973..6fadc24 100644 --- a/formhack.scss +++ b/formhack.scss @@ -22,6 +22,9 @@ $fh-focus-bg-color: rgb(220, 220, 220) !default; $fh-focus-border-color: $fh-border-color !default; $fh-focus-font-color: $fh-font-color !default; +// Inputs Vendor Styling +$fh-allow-input-vendor-styling: true !default; + // Select Vendor Styling $fh-allow-select-vendor-styling: true !default; @@ -134,6 +137,11 @@ input[type="week"], input[list] { height: $fh-input-height; -webkit-appearance: none; + @if $fh-allow-input-vendor-styling == false { + &::-ms-clear, &::-ms-reveal { + display: none; + } + } } /* Other */