2012-07-03 5 views
2

의 두 가지 요소 스타일 지정 내 PHP 코드에서 데이터베이스의 두 열의 테이블을 가져 와서 둘 다 드롭 다운 목록에 표시하고 있습니다. 다음은 코드 스 니펫입니다.HTML 선택 태그

echo "<select id='isv' class='required'>"; 
while($row = pg_fetch_row($result)){  
    echo "<option><span class='options'>" . $row[0] . "</span>&nbsp;" . $row[1] . "</option>"; 
} 
echo "</select><br>"; 

두 스타일을 다르게 구분하여 구분하고 싶습니다. 그래서 다음 CSS를 작성했습니다 :

.options 
{ 
    color: red; 
    float: left; 
    text-align: right; 
    width: 15em; 
    margin-right: 1em; 
} 

그러나 스타일은 옵션에 적용되지 않습니다. 이 코드에서 정확히 무엇을 변경해야합니까?

+1

Firefox를 사용하는 경우 Firebug는 매우 편리한 추가 기능입니다. – Don

+1

옵션 태그에 마크 업을 사용할 수 없습니다. – Musa

+1

머리를 감고 있지만 [관련] (http://stackoverflow.com/questions/3354979/styling-part-of-the-option-text?rq=1)는 이런 종류의 스타일링이 플랫폼에 따라 다르다는 것을 나타냅니다. – jedwards

답변

2

<option> 요소는 그런 식으로 스타일을 지정할 수 없으므로 JavaScript를 사용하여 직접 구현을 설계해야합니다. 드롭 다운 메뉴 (<select>)는 CSS가 아닌 브라우저 크롬에 의해 스타일이 지정됩니다. 또한 <option> 요소에는 하위 요소가 없을 수 있습니다. http://bavotasan.com/2011/style-select-box-using-only-css/

1

대신 <span>의에 대한 margin의 스마트 사용할 수있다 :

다음은 CSS를 통해 스타일을 할 수 있는지에 대한 좋은 참조입니다. (말할 것도없이 작동하지 않을 것이다)

사용자 정의 드롭 다운을 위해 일부 jQuery 플러그인을 사용해보십시오. 예제 here을 참조하십시오. 그리고 또한 대답은이 SO question입니다.

+0

어떻게해야합니까? –

+0

요소와 함께 이미지가 있으면 쉽게 보입니다. 옵션에는 2 가지 요소가 있습니다. –