2012-02-23 2 views
0

웹 페이지의 선택 목록에있는 항목을 모노 스페이스 글꼴로 표시하고 싶습니다. 나는 다음 HTML을 쓰려고 노력했다.웹 페이지의 선택 목록에 모노 스페이스 글꼴을 사용할 수 있습니까?

<p style='font-family:"Andale Mono", "Monotype.com", monospace;'> 

    The quick brown fox jumped over the lazy dogs. 

    <select multiple="multiple"> 
     <option value='1'>Option 1</option> 
     <option value='2'>Option 2</option> 
    </select> 
</p> 

결과로 "빠른 ..."이 고정 폭으로 표시되지만 옵션은 그렇지 않습니다. 옵션을 모노 스페이스 글꼴로 표시 할 수 있습니까?

업데이트 :이 문제는 내 선택 요소가 jQuery-UI 탭 div 내에 있다는 사실에서 비롯된 것 같습니다.

답변

2

CSS에서이게 무슨 문제입니까?

option { 
    font-family: "Andale Mono", "Monotype.com", monospace; 
} 
+0

작동하려면 :-( –

+0

당신의 CSS 파일이 포함되어 있습니까? –

+0

페이지에 내 인라인 CSS를 넣었습니다. (이미 작동중인 정의가 있습니다.) –

2
select { 
    font-family: "Andale Mono", "Monotype.com", monospace; 
}​ 

예 : http://jsfiddle.net/LkJfp/

내가 당신을 생각하지 않는다 그러나 IE7에서이 작업을 수행 할 수 있습니다 http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single-optgroup/#ie7-xp

난 그냥 내 CSS에 당신의 제안을 복사는하지 않는 것
+0

Firefox에서는 작동하지만 IE7에서는 작동하지 않습니다. 나는 바보 같지만 고객을 위해 IE7을 타겟팅해야합니다. –

+0

나는 단지 ... 그렇게 벗어났다. 이것은 훌륭한 대답입니다. – Purag

+0

아마도 IE7에서는 수행 할 수 없습니다. 이 경우 가장 좋은 방법은'UL' 또는'DL'로 가짜 드롭 다운을 만들고 스타일을 지정하는 것입니다. –