2

私は Hartl のRails チュートリアルの要素から学び、自分のアプリと学習経験のために使用しています。form_forチュートリアルでは、ユーザーをフォローするためのデフォルト オプションは、以下に示すように、Rails のヘルパーの横にある Bootstrap-Sass ボタンをクリックすることです。

<%= 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 %>

btn btn-large btn-primaryただし、入力をカスタム ボタンとして変更し、クラスを からに変更したいと思います.follow-button。

私のCSSは次のfollow-buttonとおりです。コメントに記載されているように、ホバー アスペクトなどの他の要素は機能しますが、透過性、フォント サイズ、色などの基本的な要素を変更するのに問題があります (フォントは基本的な Bootstrap フォントにデフォルト設定されているようです)。すべてのカスタム要素が表示されるように、フォームのデフォルトの Bootstrap 設定の一部をオーバーライドするにはどうすればよいですか? ありがとう！

.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);
      }
    }
  }

Rails 送信フォーム: 

<%= 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 %>
4

1 に答える 1

6

.follow-buttonリンク ( ) を含むをスタイリングしていますa。ただしf.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;
      }
  }
于 2013-02-15T22:10:30.013 に答える