忍者CODE

ログイン

11
テキストボックスの文字を変化させよう

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
テキストボックスが入力されたら文字の太さを太くしよう。

初期のplaceholderの文字の太さは普通で入力されたら文字の太さを太くしましょう。
自分の環境に書くコード
            <input name="sample" type="text" style="width: 200px; height:30px; font-size:16px;" placeholder="文字の太さ普通">
¥HTML¥
          
期待する画面
ログインして解答を見る
コードのアイコン

解答ソースコード

            <input name="sample" type="text" style="width: 200px; height:30px; font-size:16px;" placeholder="文字の太さ普通">
¥HTML¥
          
            input[name="sample"] {
    font-weight: bold;
}
input[name="sample"]::placeholder {
    font-weight: normal;
}
¥CSS¥
          
答えのアイコン

解説

CSSでinput属性をセレクタで指定する際は、input[name=""]のようにnameまで指定しましょう。

テキストボックスのinput[name="sample"]の文字をfont-weight: bold;に、placeholderの文字をfont-weight: nomal;にすることで文字が入力された際に文字の太さが太くなったように見せることができます。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET