html - Workaround for :disabled:valid CSS issue -
i have fields have placeholders , labels. labels hidden until text entered. when text in input box, label shows (since placeholder hidden)
the way implemented in css use :valid selector. make each input have "required", , :valid triggers whenever 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 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 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 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 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 not match</div> </div> </div> <h4>tell you</h4> <div class='txtinput-contain'> <textarea name='message' placeholder='describe training needs' required></textarea> <label for='message'>about you</label> <div class='val-box'>please briefly describe training needs</div> </div> </divrun above see it, , type field
if make field disabled, field turns grey, label not show (eg field disabled there text in it, want label show text means).
i want show 
but instead shows this. 
the line of css not working (you can see in snipped above)
.fstyle input:disabled,.fstyle input:disabled:valid + label{background:#ddd;} i'm assuming input:disabled:valid issue, don't know how express in css same result
edit:
this javascript/jquery "solution" imitate css should doing. it's terrible, hope there's css solution. , clarify, form templates , data loaded separately, value of input, , whether disabled can change time.
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);
aside issue disabled inputs, run other problems such if decide use <input type="email" /> - label stop showing if input not :valid email address.
unfortunately going outside scope of css. there plenty of clever tricks make "somewhat" work, work need use javascript.
since (now deleted) sample answer uses jquery, i'll likewise use jquery simplify example, of course can achieved in vanilla javascript enough.
$(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 initial state: $(".fstyle input").trigger("change"); then use .hastext class define how label should displayed when input has text.
this avoids restricting html5 validation can do, , should work reasonably well.
Comments
Post a Comment