부트 스트랩 양식의 제출 버튼을 커스텀 CSS로 수정하기

Question

나는 Hartl의 Rails tutorial 요소를 배우고 사용하여 내 자신의 앱과 학습 경험을 얻었습니다.

<%= form_for(current_user.relationships.build(followed_id: @user.id)) do |f| %> 
    <div><%= f.hidden_field :followed_id %></div> 
    <%= f.submit "Follow", class: "btn btn-large btn-primary" %> 
<% end %> 

그러나, 나는대로 입력을 수정하고 싶습니다 : 아래와 같이 튜토리얼에서는, 사용자를 따라하기 위해, 기본 옵션은 레일 'form_for 도우미와 함께 부트 스트랩 - 말대꾸 버튼을 클릭하고있다 사용자 정의 버튼을 클릭하고 클래스를 btn btn-large btn-primary에서 .follow-button으로 변경하십시오.

follow-button에 대한 내 CSS는 다음과 같습니다. 코멘트에서 언급했듯이 투명성과 글꼴 크기 및 색상 (기본 부트 스트랩 글꼴로 기본 글꼴을 사용하는 것처럼 보임)과 같은 기본 요소를 수정하는 데 문제가 있으며 hover aspect와 같은 다른 요소는 기능을 수행합니다. 모든 사용자 정의 요소가 나올 수 있도록 양식의 기본 부트 스트랩 설정 중 일부를 재정의하려면 어떻게합니까? 감사!

.follow-button{ 
    background: transparent; 
    border: 1px solid #e8e8e8; 
    display: block; 
    float: right; 
     &:hover { 
     background: #0089d1; 
    } 
     a { 
     color: #006faa; 
     font-weight: 400; 
     font-size: 1.4em; //font size does not change 
     display: block; 
     padding: 0px 4px 0px 4px; //modification doesn't show.. 
     text-decoration: none; 
     &:hover { 
     color: rgb(229, 246, 255); 
     } 
    } 
    } 

---

편집 : 업데이트 된 CSS 코드와

:

.follow-button{ 
    background: transparent; 
    border: 1px solid #e8e8e8; 
    display: block; 
    float: right; 
     &:hover { 
     background: #0089d1; 
    } 
    input[type='submit'] { 
     color: #006faa; 
     font-weight: 400; 
     font-size: 1.4em; //font size does not change 
     display: block; 
     padding: 0px 4px 0px 4px; //modification doesn't show.. 
     text-decoration: none; 
     &:hover { 
     color: rgb(229, 246, 255); 
     } 
    } 
    } 

레일즈 제출 형식 :

<%= form_for(current_user.relationships.build(followed_id: @course.id)) do |f| %> 
    <div><%= f.hidden_field :followed_id %></div> 
    <%= f.submit "Follow", class: "follow-button" %> 
<% end %> 

Answer 1

당신은 0,123,267,568 스타일링된다에는 링크 (a)가 포함되어 있습니다. 그러나 f.submit은 submit의 입력 유형을 작성합니다. 이제 "a"가 있기 때문에 스타일 선택기와 일치하지 않습니다.

<%= f.submit "Follow", class: "follow-button" %> 

다음

.follow-button{ 
    background: transparent; 
    border: 1px solid #e8e8e8; 
    display: block; 
    float: right; 
     background: #0089d1; 
     color: #006faa; 
     font-weight: 400; 
     font-size: 1.4em; //font size does not change 
     display: block; 
     padding: 0px 4px 0px 4px; //modification doesn't show.. 
     text-decoration: none; 
     &:hover { 
     color: rgb(229, 246, 255); 
     background: #0089d1; 
     } 
    }