CSS/HTML - 올바르게 선택 상자 스타일 지정

저는 CSS 자체를 변경하는 것이 매우 새롭고 select 요소에 조금 붙어 있습니다. 나는 다음과 같은 CSS 사용하여 원하는 위치 지금까지 내가 가지고 :CSS/HTML - 올바르게 선택 상자 스타일 지정

select { 
    float: left; 
    border: 0 none; 
    height: 46px; 
    width: 240px; 
    background-color: #191919; 
    font-size: 14px; 
    color: white; 
}

유일한 문제를, 내가 그라데이션의 일종을보고 있어요 내가 얻을 수있는 CSS에서 아무것도 찾을 수가 없어 지금 그것을 없애라. 다음은

내가 http://i39.tinypic.com/20797ki.png

출처

2011-11-20 Blap Blap

'select' 요소는 브라우저 자체가 아니라 OS에 의해 렌더링되므로 매우 제한된 CSS 만 허용합니다. 당신은 스타일을 가진'ul' (또는'ol')과 일부 JavaScript를 사용하여'select'를 모방 할 수 있습니다; '선택 요소'자체를 스타일링하는 것은 믿을 만하게 달성하기가 거의 불가능합니다. JavaScript 접근 방식에 대한 몇 가지 지침을 보려면이 질문을 읽으십시오 (일반 JS보다는 jQuery를 사용 함에도 불구하고) : http://stackoverflow.com/questions/4599975/html-select-box-options-on-hover –

와우 ... thats really 끔찍한, 네가 도와 줘서 고마워. –

당신은 선택, 체크 박스, 라디오 버튼 스타일을 자바 스크립트를 사용할 필요가

을보고 있어요 것입니다.

사용할 수있는 라이브러리 fancyform (필수 jQuery)이 있습니다. 위의 항목을 변형 할 수 있으며 텍스트 영역에 사용자 정의 스크롤바가 거의 완벽하게 지원됩니다. http://lutrasoft.nl/jQuery/fancyform/ 소스 내에서 최신 버전을 얻을 수 있습니다.

HTML :

<select class="select"> 
    <option>Option 1</option> 
    <option>Option 2</option> 
</select>

자바 스크립트 :

$(function(){ 
    $(".select").transformSelect(); 
});

CSS (편집 필요)

.transformSelect li 
{ 

    position : relative; 

} 

    .transformSelect li span 
    { 
     cursor : pointer; 
     padding  : 3px; 
     border  : 1px solid #cccccc; 
     width  : 154px;    
     line-height : 15px; 
     height  : 15px; 
     display  : block; 
    } 

     .transformSelect li span:hover 
     { 
      background : #eeeeee; 
     } 

    .transformSelect li ul 
    { 
     position : absolute; 
     left  : 0;  
     top   : 22px; 
     border  : 1px solid #cccccc; 
     width  : 160px; 
     background : #ffffff; 
    } 
     .transformSelect li ul li span 
     { 
      border : 0;  
      cursor : pointer; 
     } 
      .transformSelect li ul li span:hover 
      { 
       background : #cccccc; 
      }

이 스크립트는 다음을 생성합니다 사용하기 정말 간단합니다 :

<ul> 
    <li><span>Option 1</span> 
     <ul> 
      <li><span>Option 1</span></li> 
      <li><span>Option 2</span></li> 
     </ul> 
    </li> 
</ul>

소스 코드 내에 UL LI을 가질 필요는 없습니다. 스크립트에 의해 생성되며 (OPTGROUP도 지원합니다). 첫 번째 항목을 표시하거나 숨기거나 사용자 입력이있는 드롭 다운이있는 옵션이 있습니다.

더 많은 설정을 원하면 스크립트 소스를 확인해야합니다.

출처

2011-11-20 12:08:44 Niels

github https://github.com/Lutrasoft/Fancyform에서도 프로젝트를 이용할 수 있습니다. – Niels

당신은

-webkit-appearance: none;

는 그 기울기를 제거하는 데 사용할 수 있습니다.

출처

2012-10-11 07:00:42 Aarvos

CSS/HTML - 올바르게 선택 상자 스타일 지정

답변

관련 문제