複数のinput[type='~']に「:focus」を適用し、ひとまとめにした書き方

Question

前提・実現したいこと

<textarea>,<input type="text">,<input type="tel">,<input type="email">
の4つに「:focus」を適用させたいです。

発生している問題・エラーメッセージ

フォーカス時のborder: 1px solid #da3c41;が初めに選択したものにしか適用されない。

box-shadow: 0 0 5px 1px rgba(218,60,65, .5);は選択した全てに適用されています。

該当のソースコード

<div class="inquiryForm cp_iptxt">
    <h2>問合せ内容を入力してください。</h2>
    <table class="inquiry_table">
        <tr>
            <th>問合せ内容</th>
            <td>
                <textarea rows="5" cols="95" v-model="condition.question"></textarea>
            </td>
        </tr>
    </table>

    <h2>利用者様の情報を入力してください。</h2>
    <table class="inquiry_table">
        <tr>
            <th>お名前</th>
            <td>
                <input type="text" placeholder="テスト　太郎" v-model="condition.name">
            </td>
        </tr>
        ・
        ・
        ・

.cp_iptxt textarea:focus, input[type='text']:focus, input[type='tel']:focus, input[type='email']:focus {
	border: 1px solid #da3c41;
	outline: none;
	box-shadow: 0 0 5px 1px rgba(218,60,65, .5);
}

試したこと

textarea:focusとinput[type='text']:focusの位置を入れ替えるとinput[type='text']:focusにしかborderが適用されません。

input typeごとにCSSを書けば解決しますが、中身は同じなので上記のように一つの｛｝でまとめて書きたいです。それともFocusは別々でしか記入できないのでしょうか。ご回答お願いします。

Comments

[int32_t]

きっと提示されているCSS以外のCSSをすべて削除すると問題は再現しませんね?

[D0NKAMA]

提示しているCSS以外の部分を消し実行しても同じ症状がおきました。

Answer 1

普通に要素を羅列すれば適用されるはずです

<style>
textarea:focus,
[type=text]:focus,
[type=tel]:focus,
[type=email]:focus
{
color:red;
}
</style>
<textarea>あああ</textarea>
<input type="text" value="あああ">
<input type="tel" value="0123">
<input type="email" value="[e-mail]">

Comments

[D0NKAMA]

.cp_iptxt textarea:focus,
.cp_iptxt input[type='text']:focus,
.cp_iptxt input[type='tel']:focus,
.cp_iptxt input[type='email']:focus {
border: 1px solid #da3c41;
outline: none;
box-shadow: 0 0 5px 1px rgba(218,60,65, .5);
}

上記のようにすべての要素の前に「.cp_iptxt」をつけることで解決しました！
ご回答いただきありがとうございました。