mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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:
committed by
Jeremy Elbourn
parent
c32b06de69
commit
dfe683bc3f
@@ -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.
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user