megwoo
8/4/2015 - 6:59 AM

CSS Placeholders for input fields

CSS Placeholders for input fields

// set default placeholder styles
::-webkit-input-placeholder {
	color: #000 !important; 
}
:-moz-placeholder {
	color: #000 !important;    
}
::-moz-placeholder {
	color: #000 !important;    
}
:-ms-input-placeholder {  
	color: #000 !important; 
}
:placeholder-shown {
	color: #000 !important; 
}

// set special placeholder styles
.white::-webkit-input-placeholder {
	color: $c-white !important; 
}
.white:-moz-placeholder {
	color: $c-white !important;  
}
.white::-moz-placeholder {
	color: $c-white !important;  
}
.white:-ms-input-placeholder {  
	color: $c-white !important; 
}
.white:placeholder-shown {
	color: #000 !important; 
}

// hide placeholder on focus
input:focus::-webkit-input-placeholder { 
	color: transparent !important;
}
input:focus:-moz-placeholder { 
	color: transparent !important;
}
input:focus::-moz-placeholder { 
	color: transparent !important; 
}
input:focus:-ms-input-placeholder { 
	color: transparent !important; 
}