2015年8月18日火曜日

bootstrapでreadonlyのテキストボックスにcssで色を変える

bootstrapでテキストボックスにスタイルを当ててたのですが、
readonlyにしてる場所がclassでスタイルを設定しても、
bootstrapで指定してるグレーっぽい色から変えられなかったので調べました。

テキストボックスのタグはこんな感じ。v schedule-input-styleにcssで色をいろいろ設定してもbootstrapのデフォルトのやつに上書きされてしまいます。
<input id="user_work_dates_attributes_20158000_work_date" class="datepicker form-control schedule-input-style" type="text" value="2015-08-18" readonly="readonly">

調べたところ、普通にschedule-input-styleにスタイルを設定するのではなく、
以下のように設定すればよいようです。カーソルもデフォルトのものに変えることができました。
input[readonly].schedule-input-style{
  background-color: #ffffff;
  cursor: default;
}


参考URL
http://stackoverflow.com/questions/23812365/force-enabled-look-to-readonly-input-with-bootstrap-css

0 件のコメント:

コメントを投稿