qq_31651207
qq_31651207
采纳率34.8%
2017-06-05 15:52

html css ,input:focus无效果

2
已采纳
 在套了一层div后,div里的input用css的input:focus设置不了样式,
只能#d1 inout:focus这样来设置样式,d1是div的id

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    #f1{background:#0CF; width:400px; padding:10px; margin-top:20%;}
    #d1{padding:8px; background:#CCC;}
    input{background:#9F6;}
    #d1 input:focus{background:#F90;}
    #bt1{border-radius:5px; background:#666;}
    #bt1:focus{background:#F00}
</style>

</head>

<body>
    <form id="f1">
        <fieldset>
            <legend>注册</legend>
            <div id="d1">
              <p><label>用户名<input type="text"  required="required" placeholder="用户名"/></label>必填</p>
              <p><label>密码<input type="password" required="required"  placeholder="密码"/></label></p>
              <p><label>电话<input type="tel" required="required"  placeholder="电话"/></label></p>
              <p><label>邮箱<input type="email" required="required"  placeholder="邮箱"/></label></p>
            </div>
            <button id="bt1">注册</button>
         </fieldset>
    </form>
</body>
</html>

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

6条回答

  • Joel_h Joel_h 4年前

    图片说明

    我试着可以的啊

    点赞 评论 复制链接分享
  • showbo GoCityPass新加坡曼谷通票 4年前
     #d1 input:focus{background:#F90;} 有用
    换成 input:focus{background:#F90;} 就不行了
    #d1 input:focus的级别高于input:focus,
    

    级别最高的生效,可以看这个:CSS选择器优先级

    点赞 1 评论 复制链接分享
  • u014292161 前端○萌妹 4年前

    可能是缓存的问题,这样写是没有问题的啊

    点赞 评论 复制链接分享
  • qq_31651207 qq_31651207 4年前

    #d1 input:focus{background:#F90;} 有用
    换成 input:focus{background:#F90;} 就不行了

    点赞 评论 复制链接分享
  • qq_31651207 qq_31651207 4年前

    图片说明

    点赞 评论 复制链接分享
  • qq_31651207 qq_31651207 4年前

    复制的代码挂了, 想实现的是点文本框变色功能

    点赞 评论 复制链接分享

相关推荐