어떻게? 검색 입력란에 사용자 입력 들여 쓰기

사용자가 search_field에 텍스트를 입력 할 때 텍스트가 상자의 검색 아이콘 위나 아래에 표시되지 않도록 오른쪽으로 4 칸 띄우기를 원합니다. 나는 기본적으로 search_field_tag가 iTunes 검색 막대 (아이콘의 오른쪽에 텍스트 표시를 입력 할 때)와 같이 작동하기를 원합니다. 도움을 청합니다.어떻게? 검색 입력란에 사용자 입력 들여 쓰기

검색 필드 내에서 텍스트를 수정해야하므로이 코드가 작동합니다.

필요한 CSS :

.search-query { 
text-indent: 15px; 
}

현재 코드 :

<%= form_tag users_path, :method => 'get', :class => "navbar-search" do %> 
<%= search_field_tag :search, params[:search], placeholder: " Find Members", :class => "search-query", :style => "width: 100px" %> 
<div class="icon-search"></div> 
<% end %>

CSS

.navbar-search .icon-search { 
position: absolute; 
top: 4px; 
left: 7px;

Search Bar Search with problem

출처

2012-12-18 Jaqx

내가 제대로 당신이 원하는 밖으로 만들 수는 없지만,이 중'패딩 왼쪽으로 수행됩니다'또는'텍스트 들여 쓰기 :' – Andy

가 여전히 작동하지. 난 그냥 내 text_field 사용자 입력을 약간 오른쪽으로 시작하고 싶습니다. itunes는 이것을한다. 트위터 검색 표시 줄은 텍스트가 아이콘에 부딪치게하지는 않지만 해당 아이콘은 오른쪽에 있습니다. 2 포인트가 더 필요해 사진을 업로드 할 수 있습니다 – Jaqx

이제 업로드하십시오! –

.search-query { 
    text-indent: 15px; 
}

출처

2013-02-12 07:55:30 Jaqx

필요에 따라 CSS를 사용하여 텍스트 영역에 패딩을 추가하십시오!

.navbar-search .icon-search { 
position: absolute; 
top: 4px; 
left: 7px; 
padding-left:20px; // this applies to only left and will start the text 20px away from the left side of textarea or input 
}

출처

2012-12-18 10:30:13

text_field 자체가 아닌 텍스트 상자 안의 텍스트에 패딩이 필요하다. – Jaqx

내 대답은 아무것도 아니야? –

패딩이있는 경우에도 텍스트 시작점은 변경되지 않습니다. 상충되는 무언가? – Jaqx

.navbar-search에 아이콘을 배경 이미지로 놓고 패딩 왼쪽에 유형을 배치하십시오. 아래를 참조하십시오.

.navbar-search { 
    padding-left: 25px; // set to any px* of choice 
    background: <set background color> url('<path to an image(preferably .png)>') no-repeat 0 0; 
    }

* 검색 창에 남겨진 패딩 양은 그 너비에 영향을줍니다.

출처

2012-12-18 14:37:51 Pais

어떻게? 검색 입력란에 사용자 입력 들여 쓰기

답변

관련 문제