jQuery Javascript でplaceholderの色を変更したい

###前提・実現したいこと
フォームがあって、フォームを未入力でボタンを押したらplaceholderの色が変わるようにしたい

###該当のソースコード

$(function(){
    $(".btn").click(function(){
      if ($('#form').val() == ""){
    $('#form').attr("placeholder","入力してください");
    $('#form').css("border","1px solid #FF3633");
  }
}
}）；

###HTMLのソースコード

<div class = "search1">
  <%= f.search_field :form, :placeholder => "検索フォーム" %>

  </div>

  <button class ="btn">次へ ></button>

###試したこと

formがあって、#formを未入力でクリックした場合、#formのplaceholderとborderの色を変更するというコードを書いているのですが、borderの色の変更はできているのですが、placeholderの色を変更できずにいます。
placeholderを指すクラス名などはあるのでしょうか？
初心者ですがどうぞよろしくお願いします。

date

2017/05/15 08:36

実際のHTMLを提示してもらうと回答しやすくなりますのでHTMLを見せてください

fkryu

2017/05/15 09:41

すみません。htmlのコードを追加しました。Ruby On Railsで記述しています。

kei344

2017/05/15 10:14

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

行動規範の内容に同意します

回答1件

ベストアンサー

jQuery で CSS を直接触るより CSSにアラート用のクラスを書いておいて addClassするほうがお勧めです。

JavaScript
1$( '#form' ).addClass( 'alert' );

【.addClass() | jQuery API Documentation】
https://api.jquery.com/addclass/

CSS
1/* Safari 5+, iOS, Android */
2.alert::-webkit-input-placeholder {
3	color: #4527A0;
4	border: 1px solid #FF3633;
5}
6/* IE 10+ */
7.alert:-ms-input-placeholder {
8	color: #4527A0;
9}
10/* IE Edge */
11.alert::-ms-input-placeholder {
12	color: #4527A0;
13}
14/* Firefox 51+, Chrome 47+, Safari 9+, Opera 34+, iOS9.2+, Android 5+ */
15.alert:placeholder-shown {
16	color: #4527A0;
17}

【CSSでplaceholderの文字色などのスタイルをカスタマイズする | ITハット】
http://ithat.me/2015/09/06/html5-placeholder-css-style-settings

【[css,html5] placeholder属性のテキストカラーを変更 - Qiita】
http://qiita.com/tmiame/items/8816d970eacaf450911f

【Can I use... Support tables for HTML5, CSS3, etc】
http://caniuse.com/#search=placeholder-shown

投稿2017/05/14 03:36

kei344

総合スコア69407

fkryu

2017/05/15 03:18

ご回答ありがとうございます。指示された通り、JavascriptでaddClassをして.alertのcssを追加しましたが変化しませんでした。。。 chromeの検証で見たらclassはalertに変わっていたのですが。。。

kei344

2017/05/15 04:22

https://jsfiddle.net/4L1z2r55/ とりあえずWindows/Chrome環境で色が変わることは確認しました。ボーダーはスタイルのつけ方が良くなかったので変更しています。上記URLで確認してみてください。また、他の指定で上書きされていないか確認してみてください。

fkryu

2017/05/15 05:50

やはりできませんでした。。なんで他に上書きしているものもありませんでしたし、なんでかわかりません。。。すみません。。

kei344

2017/05/15 05:54

上記URLでの表示は確認いただけましたか？文字が赤色になっていたらブラウザの問題ではありません。もしかして、input 要素以外にplaceholderを設定していませんか？

fkryu

2017/05/15 08:33

はい。上記URLで赤字になっていました。他でもplaceholderを設定しています！！

kei344

2017/05/15 08:39

> 他でもplaceholderを設定しています！！その場合CSSの優先度が高いほうが優先されます。【!importantはもう使わない！CSSの優先順位をおさらいしよう | アライドアーキテクツのクリエイターブログ】 http://creator.aainc.co.jp/archives/4947 placeholderを付けられるのは input 要素だけですが、こちらも大丈夫ですか？「#form」が「<form id="form">」とかにはなっていませんよね？

fkryu

2017/05/15 09:47

cssの優先順位を見て、できるようになりました！！ .alert::-webkit-input-placeholderその他のcssのcolorに!importantをつけたらできました！ありがとうございます！

行動規範の内容に同意します