努力的小哇 2021-12-10 12:32 采纳率: 50%
浏览 30
已结题

让文字上移且输入时不掉下来

就是不掉下来，而且变颜色，输入东西的时候还在，也就是鼠标移开不掉下来

  • 写回答

1条回答 默认 最新

  • 前端阿彬 新星创作者: 前端开发技术领域 2021-12-10 12:35
    关注
    <!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>
        <style>
            .form-item {
                position: relative;
                margin-top: 40px;
            }
            .form-item label,
            .form-item input {
                position: absolute;
                height: 32px;
                line-height: 32px;
                top: 0;
                left: 10px;
            }
            .form-item label {
                color: #ccc;
                transition: all .4s;
                z-index: 1;
            }
            .form-item input {
                border: none;
                outline: none;
                border-bottom: 1px solid #ccc;
                background: transparent;
                z-index: 2;
            }
            #olabel{
                opacity: 0;
            }
            .form-item input:focus {
                border-color: red;
            }
            .form-item input:hover + #olabel {
                opacity: 1 !important;
                color: red;
                top: -32px;
            }
            .form-item input:focus + #olabel {
                opacity: 1 !important;
                color: red;
                top: -32px;
            }
        </style>
    </head>
    <body>
        <div class="form-item">
            <input type="text" id="oinput" value=""/>
            <label for="" id="olabel">请输入账号</label>
        </div>
        <script>
        var input = document.getElementById('oinput')
        var label = document.getElementById('olabel')
        if(input.value !== ''){
            label.style.opacity = 0
        }else{
            label.style.opacity = 1
        }
        input.onfocus = function(){
            if(input.value !== ''){
                label.style.opacity = 0
            }else{
                label.style.opacity = 1
            }
        }
        input.onblur = function(){
            if(input.value !== ''){
                label.style.opacity = 0
            }else{
                label.style.opacity = 1
            }
        }
        </script>
    </body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 12月18日
  • 已采纳回答 12月10日
  • 创建了问题 12月10日