입력 포커스의 스타일 아이콘

집중할 때 입력 폼 옆에 내 검색 아이콘을 표시하고 싶지만 올바른 선택기를 찾을 수없는 것 같습니다. 수동으로 양식 자체에 포커스 이벤트를 추가하면 입력에는 작동하지 않지만 작동합니다. 무슨 일 이니?입력 포커스의 스타일 아이콘

HTML

<form action="/search" class="form-inline" method="get"> 
    <div class="glyphicon glyphicon-search"></div> 
    <input autocomplete="off" class="form-control" data-turboform="" name="search" placeholder="Search for your products!" value="" type="text"> 
    <div class="checkbox"> 
    <label> 
     <input type="checkbox"> 
     Translate my search 
     <span class="bold">?</span> 
    </label> 
    </div> 
</form>

CSS

input[type="text"]:focus .glyphicon-search{ 
    color: $bp-orange 
}

출처

2016-08-03 NooBskie

글리피콘은 작은 이미지이므로 쉽게 색상을 변경할 수 없습니다. "font awesom"을 사용하거나 글리프콘에 필터를 추가하십시오. –

@TobiasK. 글꼴은 글꼴이 굉장히 똑같지는 않습니다. 당신은 CSS를 통해'color'을 바꿀 수 있습니다 – NooBskie

CSS를 사용하면 이전 요소를 선택할 수 없습니다. JS를 사용해야합니다. – Vucko

옆 형제에 CSS를 적용하지만 당신은 HTML에서 다음 glyphicon 먼저 input를 넣어 필요가 + 선택기를 사용할 수 있습니다

input[type="text"]:focus + .glyphicon-search{ 
    color: $bp-orange 
} 

<form action="/search" class="form-inline" method="get"> 
    <input autocomplete="off" class="form-control" data-turboform="" name="search" placeholder="Search for your products!" value="" type="text"> 
    <div class="glyphicon glyphicon-search"></div> 
    <div class="checkbox"> 
    <label> 
     <input type="checkbox"> 
     Translate my search 
     <span class="bold">?</span> 
    </label> 
    </div> 
</form>

출처

2016-08-03 06:58:09

이 기능을 사용하여 동일한 스타일링을 유지하기 위해 glyphicon에 'float : left'를 추가했습니다. 감사 – NooBskie

입력 포커스의 스타일 아이콘

답변

관련 문제