質問 > フロント機能 > selectボックスを選択後、ボックス内の色を変更したいです。 |
フロント機能
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
bio |
投稿日時: 2022/4/14 22:34
対応状況: −−−
|
一人前 登録日: 2013/3/13 居住地: 投稿: 81 |
selectボックスを選択後、ボックス内の色を変更したいです。 どうか宜しくお願い致します。
eccubeにて以下の様なinputであれば、ボックスに文字が入力され次第、ボックス内の色が自動的に変更されますが、その下のselectボックスでは値が選択されてもボックス内の色が変更されません。 <input type="text" name="name"> <select name="<!--{$key3}-->" style="<!--{$arrErr[$key3]|sfGetErrorColor}-->" class="boxHarf top data-role-none"> <option value="">都道府県</option> <!--{html_options options=$arrPref selected=$arrForm[$key3].value}--> </select> そこで、cssで以下の様な設定を試しているのですが、select選択後のボックス内の色を変更することができません。 common.css select.boxHarf::selected { background: #CCCCCC; } 本ケースの様な場合、どの様にすればselectで値を選択後、そのボックス内の色を変更することができますでしょうか? windows/ios/android eccube 2.17 php7.4.3 mysql8.0 |
468 |
投稿日時: 2022/4/15 9:49
対応状況: −−−
|
神 登録日: 2008/10/26 居住地: 投稿: 3217 |
Re: selectボックスを選択後、ボックス内の色を変更したいです。 CSSセレクタでselectタグにselectedを指定されていますが
値選択の操作をした場合はoptionタグにselected属性が付与される為、selectにselected属性が付与される事はないと思います。 その為、javascriptのonchangeイベント等で値が変更されたタイミングで背景色を変更するといった対応が必要かと思います。
|
bio |
投稿日時: 2022/4/16 15:37
対応状況: 解決済
|
一人前 登録日: 2013/3/13 居住地: 投稿: 81 |
Re: selectボックスを選択後、ボックス内の色を変更したいです。 468様
以下の様にjavascriptを使用してselectプルダウンを変更後、ボックス内の色を変更できました。ありがとうございます。 <script> function Color(sample){ if( sample.value == 0 ){ sample.style.color = ''; }else{ sample.style.backgroundColor = '#EEFFFF'; } } </script> <select type="text1" onchange="Color(this)"> </select> ところで、eccubeの場合、inputに文字を入力した際に自動的にボックス内の色が変更するのはどのファイルのどこの設定によりそうなるのでしょうか? selectとinputの色を同じにしたいのですが、どこで設定しているのかわかりません。 |
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |