2008-09-23 3 views
13

CSS를 통해 태그의 크기 속성을 설정 하시겠습니까?

일반적으로 이렇게 할 수 있습니다 :

<select size="3"> 
    <option>blah</option> 
    <option>blah</option> 
    <option>blah</option> 
</select> 

그리고 그것은 세 가지 옵션이 모두 표시되는 선택 상자로 렌더링됩니다 (드롭 다운없이)
나는 CSS에서이 크기 속성을 설정하는 방법을 찾고 있습니다.

답변

7

크기를 설정하는 옵션이 없지만 크기를 설정하면 일부 브라우저에서 너비/높이 속성을 CSS를 통해 원하는대로 설정할 수 있습니다.

일부 = Firefox, Chrome, Safari, Opera. IE에서

많이하지 작동하지만 (놀랄 없음)

당신은 그러나 당신이 원하는 경우 크기 속성이 설정되어있는 경우, IE에서 사용하는 CSS의 표현, 확인, 만약 그렇다면, (재에 JS를 실행할 수) 원하는 크기로 설정 ... 예

size = options.length; 
+0

CSS에서 HTML의 'size = 2'및 'height : 20em'을 테스트했으며 IE8, FF13, Chrome19, Opera12에서 작동합니다. – some

-2

나는이 가능하다 믿지 않는 나는 이것이 가능하다고 생각하지 않는다 더

6

.

CSS 속성은 매우 일반적이며 (모든 요소에 적용 가능) 어떤 방식 으로든 요소의 기능을 변경할 수 없습니다 (모양 만).

크기 속성은 최소한의 크기 = 1/크기의 경우 요소의 기능을 변경합니다! 당신이 CSS를 통해 HTML 내에서 설정 속성을 추가 할 수 없습니다 일반적 = 1

0

. pseudo 선택자를 사용하여 html에 추가 할 수 있습니다. before 및 : after. 그러나 그것에 관한 것이고, 여전히 모든 브라우저에서 호환되지 않습니다. 이 작업을 정말로 수행해야한다면 Javascript에 의지해야한다고 생각합니다.

+0

나는 동의한다. 이것은 jQuery의 직업으로 나를 공격합니다. –

2

은 내가 이런 일에 CSS를 사용하여 선택의 폭과 높이를 설정 할 수 있었다, 동의 :

가 IE에서
select { width: 5em; height: 5em; } 

작품 (7) 난 그냥 그것을 테스트뿐만 아니라.

+0

이것은 낡은 질문이지만, 크기가 4보다 작 으면 ** size = ** 속성을 무시하고 Safari에서 문제가 발생했습니다. CSS 'height : 3em;'에서 위의 제안을 사용하여 일관되게 여러 개를 약 2 줄 (FF8, IE9, Safari4, Chrome15)으로 선택하십시오. ** size = 2 ** 속성에 대한 합리적인 대체품 인 것 같습니다 – toyNN

+0

이 답변은 질문에 적용되지 않습니다. OP는 물리적 인 크기가 아니라 크기 속성에 대해 이야기하고있었습니다. size 속성은 드롭 다운을 'n'요소의 스크롤 가능한 목록으로 바꾼다. 여기서 'n'은 크기이다. – Ben

2

이 시도 :

select[attr=size] { 
    width:auto; 
    height:auto; 
} 
+2

안녕하세요, Marco, StackOverflow에 오신 것을 환영합니다! 그냥 코드를 게시하는 것이 아니라 답에 대해 좀 더 설명해보십시오. 이것은 사람들이 당신의 답을 찾아 내고 이해하도록 돕습니다. –

+0

이것은 실제로 질문의 제목에 대한 대답 일 수 있습니다. 시체는 실제로 약간 다른 문제를 물었다.이 제목을 더 명확하게 편집했습니다. –

0

당신은 크기 속성을 가진 스타일을 선택 항목에 대한 CSS 선택기를 사용할 수 있습니다 :

select[size]{ 
/*your style here */ 
} 
+0

이것은 실제로 질문의 제목에 대한 대답 일 수 있습니다. 시체는 실제로 약간 다른 문제를 물었다. 이 제목을 더 명확하게 편집했습니다. –

관련 문제