html – 解决方法：禁用：有效的CSS问题

2023年2月14日 170次阅读

我有一些字段有占位符和标签.标签将被隐藏,直到输入文本为止.当文本在输入框中时,标签显示(因为占位符现在已隐藏)

我在CSS中实现它的方法是使用：valid选择器.我让每个输入都有“必需”,然后：只要输入有文本就有效触发

.fstyle{font-family:arial,sans-serif;font-size:14px;color:#000}
.fstyle .fbutton{width:50%;margin:18px auto;background-color:#ef8f34;opacity:.5;color:#fff;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;text-align:center;padding:15px 5px;font-size:20px;font-weight:700;overflow:visible;margin-bottom:7px;text-shadow:1px 1px 2px rgba(0,0,0,.5);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out}
.fstyle .fbutton.active{opacity:1;cursor:pointer;-webkit-box-shadow:2px 2px 3px #888;-moz-box-shadow:2px 2px 3px #888;box-shadow:2px 2px 3px #888}
.fstyle .fbutton.active:hover{background-color:#f29d51;text-shadow:1px 1px 2px rgba(0,0,0,.8);-webkit-transition:.2s;-moz-transition:.2s;-o-transition:.2s;transition:.2s}
.fstyle .finputbtn{display:inline-block;display:none;position:absolute;width:100px;margin:0 0 0 -100px;height:40px;line-height:40px;font-size:16px;color:#fff;background:#ef8f34;text-align:center;cursor:pointer!important}
.fstyle h4{font-size:13px;font-weight:700;color:#4d4d4d;display:block;width:auto;padding:18px 0 4px 4px;margin-bottom:12px;border-bottom:1px solid #9f9f9f}
.fstyle h3{font-size:16px;font-weight:700;color:#4d4d4d;display:block;width:auto;padding:18px 0 4px 4px;margin-bottom:12px;border-bottom:1px solid #9f9f9f}
.fstyle .select-contain{padding:0;margin:0 0 32px;border:2px solid #b7b7b7;width:auto;border-radius:0;overflow:hidden;color:#000;background:#e4e4e4 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAICAYAAADwdn+XAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAANRQAADUUBUfHEqAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADKSURBVCiRfdA/L8NhFMXxzyOa+JPo3MQiNoLVIGKymkwGL8DLUhKJSFgNhs4MTUSYGbwA0qTkWB5NNb+6273ne0/uuQWr2MIr+kkG/qlSyjw2sYx+SaKU0sERFtBDL8nXxGILO9jFAN0kbyXJLzCHQ6zhGadJvqvWxjE6eMFFkk8YGVSwYB97eMIZFnGCJdzhNmNLfwzGjA6wjccaawX3SS4n2dkpv7pBG+u1f8d1EzjTNKwnXuEDQ5wnGTaxjRFGYikbaCV5mMb8AP68TeEXCmHVAAAAAElFTkSuQmCC) no-repeat 95% 50%}
.fstyle select{padding:11px 8px;width:130%;border:none;box-shadow:none;background-color:transparent;background-image:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:14px}
.fstyle select:focus{outline:none}
.fstyle label{visibility: hidden;opacity:0;transition: visibility 0s ease-in-out .5s, opacity .5s ease-in-out;position:absolute;top:-12px;left:-2px;padding:2px 4px;margin:0;background:#fff;border:2px solid #b7b7b7;border-bottom:0;border-radius:10px 10px 10px 0;font-size:12px;color:#669}
.fstyle input:valid + label,.fstyle textarea:valid + label{visibility: visible;opacity:1;transition: opacity .5s ease 0s,visibility 0s ease-in-out 0s}
.fstyle .txtinput-contain{position:relative;padding:0;margin:0 0 32px;border:2px solid #b7b7b7;width:auto;border-radius:0;color:#000;background:#fff;text-align:left}

.fstyle .___-_{width:auto;text-align:right;position:relative}
.fstyle .___- {width:60%}
.fstyle    .-_{width:34%;position:absolute;right:0;top:0;margin:0}

.fstyle .__-__{width:auto;text-align:right;position:relative}
.fstyle .__-  {width:47%}
.fstyle   .-__{width:47%;position:absolute;right:0;top:0;margin:0}

.fstyle input{padding:12px 10px;box-sizing:border-box;width:100%;border:none;box-shadow:none;background-color:transparent;background-image:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:14px}
.fstyle input:focus{outline:none}
.fstyle input:disabled,.fstyle input:disabled:valid + label{background:#ddd;}
.fstyle textarea{padding:12px 10px;box-sizing:border-box;width:100%;border:none;box-shadow:none;background-color:transparent;background-image:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:arial,sans-serif;font-size:14px;height:104px;resize:none}
.fstyle textarea:focus{outline:none}
.fstyle .val-box{font-size:12px;background:#d74b4b;color:#fff;padding:0;top:0;position:relative;margin-top:0;width:auto;opacity:0;height:0;transition:all .2s ease-out}
.fstyle input.isinvalid:not(:focus) ~ .val-box,.fstyle textarea.isinvalid:not(:focus) ~ .val-box{opacity:1;margin-top:-8px;padding:2px 8px;height:14px}
.fstyle .headimg{margin-top:30px;margin-bottom:15px;max-width:100%;max-height:auto}
.fstyle.cozy .select-contain,.fstyle.cozy .txtinput-contain{margin-bottom:14px}
<div class='fstyle cozy'>
      <h4>Welcome, please set up your account</h4>
      <div class='txtinput-contain'>
        <input id="company" type='text' name='company' placeholder='Company / Organization' value="asdfasfdasdf" disabled required/>
        <label for='company'>Company</label>
        <div class='val-box'>Please enter your company name</div>
      </div>
      <div class='txtinput-contain'>
        <input id="username" class="isvalid" type='text' name='email' placeholder='Email / Login' required/>
        <label for='email'>Login</label>
        <div class='val-box'>Please enter a valid email</div>
      </div>
      <div class='__-__'>
        <div class='txtinput-contain __-'>
          <input id="name_f" type='text' name='firstname' placeholder='First name' required/>
          <label for='firstname'>First name</label>
          <div class='val-box'>Required</div>
        </div>
        <div class='txtinput-contain -__' >
          <input id="name_l" type='text' name='lastname' placeholder='Last name' required/>
          <label for='lastname'>Last name</label>
          <div class='val-box'>Required</div>
        </div>
      </div>
      <div class='__-__'>
        <div class='txtinput-contain __-'>
          <input id="password" type='password' name='password' placeholder='Password' required/>
          <label for='password'>Password</label>
          <div class='val-box'>Password is too short</div>
        </div>
        <div class='txtinput-contain -__' >
          <input id="cpass" type='password' name='confirmpassword' placeholder='Confirm password' required/>
          <label for='confirmpassword'>Confirm password</label>
          <div class='val-box'>Password does not match</div>
        </div>
      </div>
      <h4>Tell us about you</h4>
      <div class='txtinput-contain'>
          <textarea name='message' placeholder='Describe your training needs' required></textarea>
          <label for='message'>About you</label>
          <div class='val-box'>Please briefly describe your training needs</div>
</div>
</div

运行上面的内容以查看它,然后键入一个字段

如果我禁用字段,字段本身会变为灰色,但标签不显示(例如,字段已禁用,但文本中包含文本,我希望标签显示文本的含义).

我希望它像这样展示
《html – 解决方法：禁用：有效的CSS问题》

但它显示像这样.
《html – 解决方法：禁用：有效的CSS问题》

没有工作的css行(你可以在剪切上面看到它)

.fstyle input:disabled,.fstyle input:disabled:valid + label{background:#ddd;}

我假设输入：禁用：有效是问题,但我不知道如何在CSS中表达它以获得相同的结果

编辑：

这是模仿CSS应该做什么的javascript / jquery“解决方案”.这真的很糟糕,所以我真的希望有一个CSS解决方案.为了澄清,表单模板及其数据是单独加载的,因此输入的值以及是否被禁用都可以随时更改.

setInterval(function(){
    $('.fstyle input:disabled').each(function(){
        if($(this).val()) {
            $(this).siblings('label').css({
               visibility: "visible",
               opacity: 1
            });
        } else {
            $(this).siblings('label').css({
               visibility: "hidden",
               opacity: 0
            });
        }
    });
},100);

最佳答案 除了禁用输入的问题之外,您还会遇到其他问题,例如,如果您决定使用< input type =“email”/> – 如果输入不是：有效的电子邮件地址,标签将停止显示.

不幸的是,这样的事情将超出CSS的范围.有很多巧妙的技巧使它“有点”工作,但为了使它正常工作,你需要使用JavaScript.

由于您的(现已删除)示例答案使用jQuery,我同样会使用jQuery来简化示例,但当然它可以很容易地在vanilla JavaScript中实现.

$(document.body).on("input change", ".fstyle input", function(e) {
    var input = $(this),
        label = input.next("label");

    if( input.val()) label.addClass("hastext");
    else label.removeClass("hastext");
});
// trigger for initial state:
$(".fstyle input").trigger("change");

然后使用.hastext类定义输入文本时标签的显示方式.

这样可以避免限制您可以执行的HTML5验证,并且应该可以很好地工作.

点赞