CSS 문제의 <select> 스타일 지정

순수 CSS를 사용하여 < 선택> 드롭 다운 상자의 스타일을 지정하고 있습니다. 아래 코드를 사용하면 하나의 딸꾹질로이 작업을 수행 할 수 있습니다. 옵션의 텍스트가 너무 넓어지면 드롭 다운 화살표의 배경 이미지 전에 잘리지 않습니다.CSS 문제의 <select> 스타일 지정

Normal View

텍스트가 너무 깁니다 : 있도록

Text too long

내가 달성하고자하는 것은 텍스트를 화살표 이미지 드롭 다운 전에 차단 한 것으로 그들은 중복되지 않는 . 그러나, 나는 여전히 전체 텍스트처럼 드롭 다운 목록이 확장 될 때 표시 할 것 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Styling Selects</title> 
    <style type="text/css"> 
     .selectDiv select { 
      background: transparent; 
      width: 250px; 
      padding: 7px; 
      font-size: 16px; 
      border: none; 
      height: 34px; 
      text-transform: lowercase; 
      color: #666666; 
      z-index: 100; 
      position: absolute; 
      left: 0px; 
      top: 0px; 
     } 

     .selectDiv { 
      border: 2px solid #666666; 
      display: block; 
      width: 218px; 
      height: 34px; 
      overflow: hidden; 
      position:relative; 
      display: inline-block; 
     } 

     .selectButtonDiv { 
      width: 16px; 
      height: 16px; 
      z-index: 99; 
      position: absolute; 
      left: 190px; 
      top: 9px; 
      display: inline-block; 
      background: url("stream_7B0046.png") no-repeat -96px #FFF; 
     }  
    </style> 
</head> 
<body> 
    <div class="selectDiv"> 
     <div class="selectButtonDiv"></div> 
     <select> 
      <option value="Option 1">Option 1</option> 
      <option value="Option With Really Long Name">Option With Really Long Name</option> 
     </select> 
    </div> 
</body> 
</html>

내가 텍스트를 잘라내 수있는 방법에 대한 아이디어 :

여기 Expanded

코드입니다 축소 된 드롭 다운 상자를 표시 할 때 확장되었을 때 전체 텍스트를 표시합니다. 이 모든 것은 순전히 CSS에 남아 있습니다. 감사!

출처

2012-05-29 John Chapman

패딩을 시도 했습니까? –

패딩 - 오른쪽 텍스트와 화살표 사이가 아니라 원래의 선택 드롭 다운 화살표 오른쪽에 패딩을 추가합니다. 따라서 다른 드롭 다운 화살표를 표시하는 동안 일반적인 드롭 다운 화살표를 숨길 필요가 없습니다. –

첫 번째 제안은 select을 최대 문자 수를 고려할만큼 충분히 넓게 만드는 것입니다. 나는 당신이 그것을 생각하고 그것을 사용할 수 없다고 확신합니다.

제 2의 권장 사항은보다 쉽게 스타일을 지정할 수있는 정의 목록으로 select options을 바꾸기 위해 Javascript, 특히 jQuery DD를 추가하는 것입니다. https://github.com/HenrikJoreteg/jquery.dd

출처

2012-05-29 19:54:50

jQuery 플러그인 (Chosen)을 사용하여 종료되었으므로 JS가 반드시 있어야했습니다. –

@JohnChapman이 Chosen의 팁에 감사 드리며, 나는 그것을 확실히 사용하기 시작할 것입니다! –

내부 div에 select를 넣고 기존 내부 select div 또는 margin-right에서 padding-right를 사용합니다.

출처

2012-05-29 19:21:15

어떻게 할 수 있습니까? 그렇게하면 드롭 다운 이미지가있는 div가 더 이상 select 아래에 있지 않게됩니다 (이미지를 클릭하면 드롭 다운이 더 이상 나타나지 않습니다). –

float : 내부 div에 왼쪽을 추가하거나 해당 div 대신 span을 사용하십시오. 그것은 분명하기 때문입니다. –

죄송합니다. 모바일에서, 코딩을 좀 더 유용하게하는 것은 MO에서의 악몽이 될 것입니다. –

CSS 문제의 <select> 스타일 지정

답변

관련 문제