중간에 자리 표시 자 텍스트 넣기 :
중간에 타이트 텍스트를 원하십니까?
경우 예:
.ui-input-search input{
text-align: center;
}
데모
아니요 인 경우 :
::-webkit-input-placeholder {
text-align:center;
}
:-moz-placeholder { /* Firefox 18- */
text-align:center;
}
::-moz-placeholder { /* Firefox 19+ */
text-align:center;
}
:-ms-input-placeholder {
text-align:center;
}
데모
원하시면 중앙에 아이콘을 놓아도되지만 타이핑을해도 사라지지 않아서 말이 안되는 것 같아요. 하지만 원하는 경우 :
.ui-input-search:after{
width:18px;
height:18px;
left: 50%;
margin-left: -50px;
}
-------------------데모
ezanker의 답변 을 확장하려면 입력이 포커스를 얻었을 때 적용된 클래스가 있으므로 검색 아이콘을 제거 할 수도 있으므로 CSS를 다음과 같이 다시 작성할 수 있습니다.
.ui-input-search::after{
width:18px;
height:22px;
left: 50%;
top: 40%;
margin-left: -52px;
}
.ui-focus::after{
left: 10%;
}
.ui-focus ::-webkit-input-placeholder {
color: white;
text-shadow: 0px 0px #FFffff;
}
.ui-focus :-moz-placeholder { /* Firefox 18- */
color: white;
text-shadow: 0px 0px #FFffff;
}
.ui-focus ::-moz-placeholder { /* Firefox 19+ */
color: white;
text-shadow: 0px 0px #FFffff;
}
.ui-focus :-ms-input-placeholder {
color: white;
text-shadow: 0px 0px #FFffff;
}
데모
출처
https://stackoverflow.com/questions/22079841