1
JQuery와 CSS를 사용하여 스타일이 지정된 사이트가 있습니다. 양식을 사용하여 검색 입력을 수집하고 선택 상자 및 스크롤 막대에 문제가 발생했습니다.CSS가있는 선택 유형 입력의 내부에 스크롤 막대 스타일 지정
저는 주로 Chrome 및 IE 용으로 개발했습니다. 지금은 Chrome에 관심이 있지만 크로스 플랫폼 솔루션이 좋을 것입니다.
잘 웹킷 - 스크롤 막대를 사용하여 다른 스크롤바를 작품 스타일링 :
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
다음 작품 선택 입력 상자를 스타일링 잘뿐만 아니라 :
select {
-webkit-appearance: button;
-webkit-border-radius: 2px;
/*-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);*/
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
것은 내가 함께 가져올 수없는 것 무엇 선택 입력을 클릭 할 때 표시되는 특정 스크롤 막대의 스타일입니다 (스크롤 막대를 발생시키는 데 충분한 항목이있는 경우).
분명히 요소가 없으며 실제로 스타일을 적용 할 수 있는지 여부는 알 수 없습니다. JQuery가 옵션 일 수도 있지만, 플러그인 후에 페이지를 과부하하고 싶지는 않습니다.
페이지의 다른 모든 항목은 스타일이 지정되어 있으며 Chrome 및 IE의 기본 스크롤바는 입력 사항을 실제로 보지 않습니다.
내 드롭 다운 상자를 만들고 숨겨진 입력 필드를 채울 수있는 방법이 될 수 있지만, HTML5와 CSS3이 얼마나 유연한지를 감안할 때 다소 유쾌한 것처럼 보입니다. 더 많은 작업과 JQuery가 추가 될 것입니다. 그 페이지.
도움이나 의견을 보내 주시면 감사하겠습니다.
선택 요소의 스타일을 지정할 수 있습니다. 붙여 넣은 코드가 잘 작동합니다. 누락 된 부분은 클릭 할 때 생성되는 드롭 다운의 스타일을 지정하는 기능입니다. 그것은 요소가없고 DOM의 일부가 아닙니다. 스크롤 막대는 DOM의 일부가 아니지만 CSS로 스타일을 지정할 수도 있습니다. 절망적 인 점은 Chrome이 드롭 다운 상자 안의 * 특정 * 스크롤바 스타일을 지정하지 않는다는 것입니다. 그래서 제 진짜 질문은 크롬을 위해 스타일을 지정할 특정 CSS가 있다는 것입니까? – user1441141
선택 상자 또는 화살표의 드롭 다운 메뉴 스타일을 지정하는 방법은 없으며 텍스트 입력 영역의 모양 만 스타일을 지정할 수 있습니다. 앞서 말했듯이이 작업을 수행하는 가장 좋은 방법은 select 요소를 텍스트 상자로 대체하는 사용자 지정 스크립트를 만드는 것이며 div를 포함하는 div는 옵션을 바꿉니다. – jimjimmy1995
정말 가치있는 일인지 여부는 프로젝트의 규모에 달려 있습니다. 일반적으로 사용자는 몇 초 동안 드롭 다운 만 볼 수 있습니다. 또한 기본 드롭 다운을 보는 데 익숙하며 사용자 정의가 혼란 스러울 수 있다는 사실도 있습니다. – jimjimmy1995