如下代码里,加了focus时候的样式,但是input框背景色没有变

如下代码里,加了focus时候的样式,但是input框背景色没有变

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>动态伪类</title>

        <style type="text/css">

            /*此处写代码*/

            .input-style:hover {

                border-color: red;

            }

            .input-style:focus {

                background-color: orange;

            }

        </style>

    </head>

    <body>

        <!-- 此处写代码 -->

        <div>

            <label>用户名:</label>

            <input type="text" name="userName" class="input-style">

        </div>

        <div>

            <label>密码</label>

            <input type="password" name="password" class="input-style">

        </div>

        

    </body>

</html>

如上代码里,加了focus时候的样式,但是input框背景色没有变


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕然然 2021-04-03 14:00:23

同学你好,老师测试了一下你的代码,当鼠标点击input输入框的时候(即inpu框获得focus焦点),此时input框的背景颜色是有变化的(如图所示)。代码书写没有问题,同学可以再试一下哦。祝学习愉快!

http://img1.sycdn.imooc.com//climg/6068047109516b3b09550332.jpg


  • 提问者 微微Vivian哦耶 #1

    好的,在答题的编译区里没有变化,我以为加不上

    2021-04-03 14:03:04
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师