2013-05-17 3 views
1

문의 양식을 작성 중입니다. 이제 분명히 메시지 상자가 전자 메일 및 제목 입력 상자보다 커야합니다. 그래서 분명히 모든 상자를 바꿀 것이기 때문에 나는 css로 입력을 입력 할 수 없다. 나는 메시지 상자를 지정하는 것이 이런 식으로 진행될 것이라고 생각했다.입력 유형 이름을 지정 하시겠습니까?

input [type="text" name="message"] { 
    padding-bottom: 500px; 
} 

분명히 작동하지 않았다 ... 그래서 내가 뭘 잘못하고 있니?

HTML

<div id="contactContent"> 
<form> 
<label>Email:</label><input type="text" name="email" /> 
<br> 
<label>Subject:</label><input type="text" name="subject" /> 
<br> 
<label>Message:</label><input type="text" name="message" /> 
</form> 
</div> 

CSS 당신의 선택이 잘못

#contactContent { 
    margin-top: 50px; 
    margin-left: 350px; 
} 
input { 
    border: none; 
    background-color: #CCCCCC; 
    margin-left: 20px; 
    margin-bottom: 5px; 
    padding-right: 250px; 
    padding-top: 13px; 
    padding-bottom: 13px; 
} 
label { 
    display:inline-block; 
    width:100px; 
    font-family:maven; 
    color: #FF6464; 
    font-size: 20px; 
    text-align: right; 
} 
input [type="text" name="message"] { 
    padding-bottom: 500px; 
} 
+0

현재, '이 있습니다. – cimmanon

+0

수정할 단일 요소에 CSS 클래스를 추가 할 수 있습니다. 그러나 텍스트 영역을 사용하는 것이 어떻습니까? –

답변

5

이 올바른 방법은 모두의 유형을 통해 요소에 스타일을 적용하고 이름은 다음과 같습니다

input[type="text"][name="message"] { 
    padding-bottom: 500px; 
} 

그런 일을하기에 합당한 이유가 없다면 클래스 나 ID를 사용하여 요소를 타겟팅하는 것이 더 나을 지 모르지만.

<label for="message">Message:</label> 
<textarea id="message" name="message"></textarea> 

는 그런 다음에 대한 스타일을 입력 스타일과 경쟁하지 않습니다

+0

이렇게 사용하면 어떨까요? – Zevoxa

+0

클래스 나 ID를 사용하는 것만 큼 효율적이지 않습니다. 그 차이는별로 없지만, 수백 또는 수천 가지의 규칙이 있다면 불필요하게 큰 파일로 끝날 것입니다. –

2

메시지 상자를위한 더 나은 옵션은 <textarea> 요소입니다.

어쨌든 한 줄 입력 만 원한다면 다른 스타일링 훅은 고유 한 클래스 또는 ID가됩니다.

관련 문제