Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
fix(input, css): fix regression that broke input placeholders on Firefox
Browse files Browse the repository at this point in the history
Change to only hide automatic placeholders on webkit.
This fixes Firefox so that placeholders are visible again.

Fixes #2162.  Fixes #2480. Fixes #2045. Closes #1409. Closes #3582.
  • Loading branch information
Splaktar authored and ThomasBurleson committed Jul 6, 2015
1 parent 621bdf7 commit a64291b
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 8 deletions.
15 changes: 12 additions & 3 deletions src/components/input/input.scss
Original file line number Diff line number Diff line change
Expand Up @@ -111,11 +111,20 @@ md-input-container {
opacity: 0;
}

&:not( .md-input-has-value ) input:not( :focus ) {
color: transparent;
&:not( .md-input-has-value ) input:not( :focus ),
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-ampm-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-day-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-hour-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-millisecond-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-minute-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-month-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-second-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-week-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-year-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-text {
color: transparent;
}


/*
* The .md-input class is added to the input/textarea
*/
Expand Down
9 changes: 4 additions & 5 deletions src/components/input/input.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,13 +88,13 @@ describe('md-input-container directive', function() {
expect(el).not.toHaveClass('md-input-has-value');
}));

it('should match label to given input id', inject(function($rootScope) {
it('should match label to given input id', inject(function() {
var el = setup('id="foo"');
expect(el.find('label').attr('for')).toBe('foo');
expect(el.find('input').attr('id')).toBe('foo');
}));

it('should match label to automatic input id', inject(function($rootScope) {
it('should match label to automatic input id', inject(function() {
var el = setup();
expect(el.find('input').attr('id')).toBeTruthy();
expect(el.find('label').attr('for')).toBe(el.find('input').attr('id'));
Expand Down Expand Up @@ -164,7 +164,7 @@ describe('md-input-container directive', function() {
expect(label.textContent).toEqual('some placeholder');
}));

it('should put ignore placeholder when a label element is present', inject(function($rootScope, $compile) {
it('should ignore placeholder when a label element is present', inject(function($rootScope, $compile) {
var el = $compile('<md-input-container><label>Hello</label><input ng-model="foo" placeholder="some placeholder"></md-input-container>')($rootScope);
var placeholder = el[0].querySelector('.md-placeholder');
var label = el.find('label')[0];
Expand All @@ -174,8 +174,7 @@ describe('md-input-container directive', function() {
expect(label.textContent).toEqual('Hello');
}));

it('should expect an aria-label on the input when no label is present', inject(function($rootScope, $compile) {

it('should put an aria-label on the input when no label is present', inject(function($rootScope, $compile) {
var el = $compile('<form name="form">' +
' <md-input-container md-no-float>' +
' <input placeholder="baz" md-maxlength="max" ng-model="foo" name="foo">' +
Expand Down

0 comments on commit a64291b

Please sign in to comment.