사용자 지정 스타일 드롭 다운을 브라우저 기본 스타일 드롭 다운에 기본 설정하는 방법

Question

select 요소에 적용된 사용자 지정 CSS 클래스가 있습니다. 이 클래스가 남아 있고 웹 페이지의 양식 요소에 적용되어야한다는 요구 사항입니다. 그러나 웹 페이지의 다른 영역에는 드롭 다운 메뉴를 렌더링하는 브라우저의 기본 방식 인 드롭 다운 메뉴를 배치하고 싶지만 그렇게 할 수는 없습니다. 사용자 정의 스타일 선택 영역은 모든 선택 상자에 적용되며이 문제를 해결하기 위해 머리카락을 꺼냅니다. 아래는 코드이며 첨부 된 것은 HTML 코드에 포함되도록 표현하지 않은 경우 클래스 "select-area"가 추가되는 방식을 보여주기 위해 노출 된 코드가있는 렌더링 된 웹 페이지의 스크린 잡기입니다.

HTML :

이

<div> 
<label><strong class="tool-question">Select a table</strong> 
    <select name="2" class="tool-input-select" id="2"> 
    <option value="Select">Select</option> 
    <option value="Option One" selected>Option One</option> 
    <option value="Option Two" selected>Option Two</option> 
    </select> 
</label> 
</div> 

CSS :

.tool-input-select { 
    margin: 3px 0 6px 0 !important; 
    color: #101010 !important; 
    border: 1px solid #abadb3 !important; 
    padding: 5px !important; 
    font-size: 1.200em !important; 
} 

되는 HTML의 렌더링 된 화면 잡아 위해 첨부 된 링크를 참조하시기 바랍니다 : 사전에 screen grab here

내 감사합니다!

닉

Answer 1

그것은 당신이 타사를 사용하고 있는지 나에게 보이는 자바 스크립트를 자동으로 페이지로드 얻고있는 사용자 정의 스타일의 모습에 모든 선택 상자로 변환되어 라이브러리. 내 제안은 범인을 찾기 위해 각 자바 스크립트 라이브러리를 하나씩 제거하는 것입니다 (렌더링 된 <select>의 스타일을보고 JCF라고 말하고 싶습니다).

정말 HTML 또는 CSS 스타일과 관련이 없습니다. 선택 상자의 스타일이 jcf-hidden (숨김이므로)이고 'inspect 요소'가 <select>