부트 스트랩을 사용하여 레일에서 입력 양식 서식 지정

Question

내 레일 앱에 form_for가 있습니다. 방금 입력 된 부트 스트랩 CSS를 무시하는 방법을 알아 냈습니다 텍스트 필드.하지만 입력시 CSS를 무시하는 방법을 모르겠습니다. 텍스트 영역

좋아요, 내 텍스트 필드의 자연스러운 스타일을 변경하는 방법입니다.

%span.product-form 
    = f.text_field :name, placeholder: "Name" 

form_for

CSS

.product-form input[type="text"] { 
    height: 26px; 
    border: 0px ; 
} 

HAML 그러나이 텍스트 영역 = f.text_area :description

어떤 아이디어에 작동하지 않는 이유는 무엇입니까?

Answer 1

텍스트 영역 태그는 입력 텍스트와 유형이 다른 별도의 유형의 태그입니다. 텍스트 영역을 별도로 스타일을 지정해야합니다. 당신이 당신의 입력 필드와 같은 스타일을 원한다면, 당신은 추가 할 수 있습니다 : 스타일

.product-form input[type="text"], .product-form textarea { 
    height: 26px; 
    border: 0px ; 
} 

당신이 원하는하지 않을 수는 있지만, 텍스트 입력과 같은 텍스트 영역, 요소가 다른 기능을 수행한다.

CSS 작업을 할 때 익숙해 져야 할 한 가지는 브라우저에서 제공하는 개발자 도구를 사용하여 이와 같은 문제를 해결하는 것입니다. 요소 스타일을 지정하려고 할 때 요소를 마우스 오른쪽 버튼으로 클릭하고 '요소 검사'(Firefox 또는 Chrome을 가정)를 클릭하면 이러한 종류의 질문에 대한 답변을 직접 파악할 수 있습니다.