fix(input): undo firefox invalid style, fix maxlength in IE (#393)

* input's maxLength=-1 property not works in MS Edge

Fix floating placeholder in Firefox, without affecting autofill behavior in Chrome/Safari

Override and remove firefox box-shadow on required fields

Fixes #342. Fixes #388.
This commit is contained in:
David Gabrichidze
2016-05-12 04:50:05 +04:00
committed by Jeremy Elbourn
parent c32b06de69
commit dfe683bc3f
2 changed files with 11 additions and 5 deletions
+10 -4
View File
@@ -19,11 +19,18 @@ $md-input-underline-focused-color: md-color($md-primary);
$md-input-underline-disabled-background-image: linear-gradient(to right,
rgba(0,0,0,0.26) 0%, rgba(0,0,0,0.26) 33%, transparent 0%);
/**
* Undo the red box-shadow glow added by Firefox on invalid inputs.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid
*/
:-moz-ui-invalid {
box-shadow: none;
}
/**
* Applies a floating placeholder above the input itself.
*/
%md-input-placeholder-floating {
@mixin md-input-placeholder-floating {
visibility: visible;
padding-bottom: 5px;
transform: translateY(-100%) scale(0.75);
@@ -33,7 +40,6 @@ $md-input-underline-disabled-background-image: linear-gradient(to right,
}
}
:host {
display: inline-block;
position: relative;
@@ -120,7 +126,7 @@ $md-input-underline-disabled-background-image: linear-gradient(to right,
// Show the placeholder above the input when it's not empty, or focused.
&.md-float:not(.md-empty), &.md-float.md-focused {
@extend %md-input-placeholder-floating;
@include md-input-placeholder-floating;
}
// :focus is applied to the input, but we apply md-focused to the other elements
@@ -143,7 +149,7 @@ $md-input-underline-disabled-background-image: linear-gradient(to right,
// Once the autofill is committed, a change event happen and the regular md-input
// classes take over to fulfill this behaviour.
input:-webkit-autofill + .md-input-placeholder {
@extend %md-input-placeholder-floating;
@include md-input-placeholder-floating;
}
// The underline is what's shown under the input, its prefix and its suffix.
+1 -1
View File
@@ -138,7 +138,7 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
@Input() @BooleanFieldValue() floatingPlaceholder: boolean = true;
@Input() hintLabel: string = '';
@Input() id: string = `md-input-${nextUniqueId++}`;
@Input() maxLength: number = -1;
@Input() maxLength: number = null;
@Input() placeholder: string;
@Input() @BooleanFieldValue() required: boolean = false;
@Input() @BooleanFieldValue() spellcheck: boolean = false;