All geek questions in one place

Workaround for: Disabled: Valid CSS issue

I have fields that have placeholders as well as labels. Labels are hidden until text is entered. When the text is in the input field, then it is displayed on the label (since the hidden object is now hidden)

The way I implemented this in CSS is to use the: valid selector. I make each entry “required”, and then: valid triggers when this input has text

.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
Run codeHide result

Run above to see it and type in

If I turn off the field, the field itself becomes gray, but the label is not displayed (for example, the field is disabled, but there is text in it, I want the label to show what the text means).

I want it to be like this enter image description here

But instead, it looks like this. enter image description here

A css string that doesn't work (you can see it in the disabled above)

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

, input:disabled:valid, , CSS,

Edit:

javascript/jquery "solution", , CSS. , , 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);
+4
1

, , , <input type="email" /> - , :valid.

, - CSS. , "", JavaScript.

( ) jQuery, jQuery , , , 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, , .

+1
source

Source: https://habr.com/ru/post/1626241/

More articles:


All Articles