バージョン選択

フォーラム

メニュー

オンライン状況

32 人のユーザが現在オンラインです。 (11 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 32
もっと...

サイト内検索

質問 > フロント機能 > 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イベント等で値が変更されたタイミングで背景色を変更するといった対応が必要かと思います。


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

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の色を同じにしたいのですが、どこで設定しているのかわかりません。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン



統計情報

総メンバー数は74,626名です
総投稿数は104,055件です

投稿数ランキング

1
seasoft
7333
2
468
3217
3
AMUAMU
2712
4
nanasess
2202
5
umebius
2074
6
yuh
1664
7
red
1498
8
h_tanaka
1188
9
tsuji
942
10
fukap
907
11
shutta
835
12
tao_s
794
13 ramrun 789
14 karin 689
15 sumida 641
16
homan
633
17 DELIGHT 572
18
patapata
502
19
flealog
485
20 tonton 437


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.