카테고리 없음

[jquery-mobile] jQuery Mobile 1.4.0의 검색 입력 중앙에 자리 표시 자와 검색 아이콘을 배치하는 방법은 무엇입니까?

행복을전해요 2021. 2. 18. 03:07

중간에 자리 표시 자 텍스트 넣기 :

중간에 타이트 텍스트를 원하십니까?

경우 예:

.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