実現したいこと
#user_login { display: inline-block; width: 700px; height: 40px; transition: all 0.1s ease-out; 以下略 } #user_login + label { position: absolute; top: 0; left: 0; bottom: 0; height: 40px; width: 120px; line-height: 40px; color: white; } #user_login:focus + label { transform: translateY(-120%) translateX(0%); } #user_login:focus { padding: 10px; transition: all 0.3s ease-out; 以下略 } #user_pass { display: inline-block; width: 700px; 以下略 } #user_pass + label { position: absolute; top: 0; left: 0; bottom: 0; height: 40px; width: 120px; line-height: 40px; 以下略 } #user_pass:focus + label { transform: translateY(-120%) translateX(0%); 以下略 } #user_pass:focus { padding: 10px; transition: all 0.3s ease-out; transition-delay: 0.2s; }
このように記述しているcssで
#user_loginと#user_passがどちらも同じスタイルなので、
idの複数指定でコードを短くしたいのが実現したいことになります。
下記HTMLを載せておきます。
HTML
<p class="text-input"> <input type="text" name="log" placeholder="ユーザー名またはメールアドレス" id="user_login" autocomplete="username" value="%3$s" size="20" /> <label for="user_login">Name</label> </p> <p class="text-input"> <input type="password" name="pwd" placeholder="パスワードを入力" id="user_pass" autocomplete="current-password" class="input" value="" size="20" /> <label for="user_pass">%2$s</label> </p>
発生している問題・エラーメッセージ
#user_login { ↓ #user_login, #user_pass {
上記のように指定するとできると思ってやってみたのですが、
思うように反映されなかったです
wordpressのプラグインの関係でidをどちらも統一することができなくて、
どなたか教えていただけますと幸いです。
よろしくお願い致します。
0 コメント