Satrol_ 2022-11-06 16:33 采纳率: 90.9%
浏览 15
已结题

js左上边框颜色出现错误

想问一下在事件发生的时候为什么边框左边和上边颜色会不一样?
事件发生前

img


事件发生后

img


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        .ipt {
            color: #999999;
            outline: none;
        }
        .pink {
            border-color: #f8d8db;
            color: black;
        }
        .formal_color {
            border-color: #4f4f4f;
        }
    </style>
<body>
    <input type="text" value="请输入内容" class="ipt"> 
    <script>
        var input = document.querySelector('.ipt');
        input.onfocus = function(){
            this.value = ''; 
            this.className = 'pink ipt'
            
        }
        input.onblur = function(){
            if (this.value==='') {
                this.value = '请输入内容';
                this.style.color = '#999999';
            }
        }
    </script>
</body>
</html>
  • 写回答

1条回答 默认 最新

  • wynter888 2022-11-06 17:37
    关注

    input默认的border-style是inset,也就是3d样式,所以看上去颜色不一样
    在css中改为border-style:solid就可以了

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 11月14日
  • 已采纳回答 11月6日
  • 创建了问题 11月6日

悬赏问题

  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了,怎么打开?(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线,如何释放宽带全部速度