Добавление стилей плейсхолдеру в LESS

Давайте сделаем функцию, которая кроссбраузерно будет добавлять стили плейсхолдеру:

.placeholder(@code) {
	&::-webkit-input-placeholder {
		@code();
	}
	&:-ms-input-placeholder {
		@code();
	}
	&::-moz-placeholder {
		@code();
	}
	&::placeholder {
		@code();
	}
}

Воспольуемся нашей функцией:

input {
	.placeholder({
		color: white; 
		background-color: red;
	});
}

Результат компиляции:

input::-webkit-input-placeholder {
	color: white; 
	background-color: red;
}
input::-ms-input-placeholder {
	color: white; 
	background-color: red;
}
input::-moz-placeholder {
	color: white; 
	background-color: red;
}
input::placeholder {
	color: white; 
	background-color: red;
}

← →

↑