LESS에서 플레이스홀더에 스타일 추가하기
크로스 브라우저 방식으로
placeholder
유사 요소를 통해 스타일을 추가하는 함수를 만들어 봅시다:
.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;
}
