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

概述我有一些字段有占位符和标签.标签将被隐藏,直到输入文本为止.当文本在输入框中时,标签显示(因为占位符现在已隐藏) 我在CSS中实现它的方法是使用：valid选择器.我让每个输入都有“必需”,然后：只要输入有文本就有效触发 .fstyle{font-family:arial,sans-serif;font-size:14px;color:#000}.fstyle .fbutton{width:50 我有一些字段有占位符和标签.标签将被隐藏,直到输入文本为止.当文本在输入框中时,标签显示(因为占位符现在已隐藏)

我在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,.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,.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"  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

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

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

我希望它像这样展示

但它显示像这样.

没有工作的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验证,并且应该可以很好地工作.

总结

以上是内存溢出为你收集整理的html – 解决方法：禁用：有效的CSS问题全部内容，希望文章能够帮你解决html – 解决方法：禁用：有效的CSS问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。