html - Styling textarea's "required" attribute with CSS doesn't work -


i have added inputs, name, email etc. required attribute , provided through css, icons signify invalidated/validated status perfectly. however, same styling not insert icons in 2 textareas of form?

i have seen should remove whitespace between tags, sure have, didn't solve it.

<form id="from">   <table width="742" border="0">     <caption>     <h1>your details</h1>     <br>     </caption>   <tr>     <td width="117">first name</td>     <td width="161"><input class="input-small" type="text" placeholder="" required></td>     <td width="29">&nbsp;</td>     <td width="242">date of birth</td>     <td width="171"><input class="input-small" type="text" placeholder="eg. 01/05/1975" required></td>   </tr>   <tr>     <td>surname</td>      <td><input class="input-small" type="text" placeholder="" required></td>     <td>&nbsp;</td>     <td>phone</td>     <td><input class="input-small" type="text" placeholder=""></td>   </tr>   <tr>     <td>address</td>     <td rowspan="4"><textarea rows="5" class="input-mini" placeholder="full postal address" required></textarea></td>     <td>&nbsp;</td>     <td>email</td>     <td><input class="input-small" type="email" placeholder="e.g. you@your.mail" required></td>   </tr>   <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>email- again</td>     <td><input class="input-small" type="email" placeholder="again" required></td>   </tr>   <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>emergency contact</td>     <td rowspan="3"><textarea name="emergency" rows="5" placeholder="emergency" required="required"></textarea> &nbsp;      &nbsp;</td>   </tr>   <tr>     <td>&nbsp;</td>     <td>&nbsp;</td>     <td>&nbsp;</td>   </tr>   <tr>     <td>postcode</td>     <td><input class="input-small1" type="text" placeholder="wa1 3de"></td>     <td>&nbsp;</td>     <td>&nbsp;</td>   </tr> </table>  <br> <br> <br>  <label class="checkbox inline">   <input type="checkbox" id="inlinecheckbox1" value="option1"> option </label> <label class="checkbox inline">   <input type="checkbox" id="inlinecheckbox2" value="option2"> option </label> <label class="checkbox inline">   <input type="checkbox" id="inlinecheckbox3" value="option3"> option </label>  </form>

the css is:

@charset "utf-8"; #from  {     position: relative;     left: 200px; } .input-small1 {     width: 60px; } body {     background-color:#bafcfa; } input:required:invalid, input:focus:invalid {     background-image: url(data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaaevjrefuenqku01oe1eq/mazstdrmqsxlvsjvku9ryohd8wfhr16kh5efa8esy6hxrwupbskz6e9v1cu4tgf0dzwdeqrgkhprrdbcvlpavan3ezu+llsunadlznhwhvzmjlvvpkhzky7iqfnatuafphhp/8uo87sgsadsp27hgym/lupy6lhdqsatm+bpfvqkp3ufykwcgmwcug6okmrrg3poaqngwjdd/922hobs5c/jja6x7aiut8vyvuavqxxshfiqcyrmzo8/n1n+b8h1souwivpsusvcj2majtvwbaidv+aqkhqqbogc+fbvorjyqendcch16/btkqdalc4e6jryhgggu18io3gmhzjuwub6/fqjyni/ybpcifhbdaapxfvcbvxxbvfbngfen8dkjogwad8dljv3krutceaehmn/hxz4p9bhncjhcyhnx52r0kv/xnuqvybnm+cp7xddxl5kajw0tmaf8qjnmvegek/slhubhpkdkirjdlvxomx3y9xcsmzybq+tpyk5hzsa2ns7lgdfwdbl6fzvhn92d7dgroh/730ybltizmedgpkfnhx4kxmjve2xgpfctrrd6ghrteh9zsl8xve+pwszj+otwvletzz/wlekd71l+zehhwz/gowabkp7awwnejfaaaaaelftksuqmcc);     background-position: right top;     background-repeat: no-repeat;     -moz-box-shadow: none; } input:required:valid {     background-image: url(data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaaepjrefuenrek79pfeeux9/uddd7v/aaqqneqokmjcrgwc7/qem/ygvxszjqyi/ehcchicymujignbsgzobqai5sayrw6imne0d2d/bymz3dgd+yqkehyiyc5guyb3y+77vfewnpreffhvxfawaajtbki7dff1rwk9vphx3mthp2iaipk5eztg8qmru38h7izmkfhaf4wh1r52654pr0oamzj2dkxyt/bbg1opzuy3d9au82vgem/5ltnjsclxwzfzrxawnqwjp0xuadibszu5duvujpzq7sfybksp1gjelb+pwpt8ccxm4+2+zlxx4gukilxwa2nc5chouacmepv20fkt+diawyenvi5vcabcigwzxlenidrcdwid0lfm5iumbibgrp8woesflfecgm23/zobzwn9a4c314a1ncom1oavccugyckps/p+pidviokg9pih6ylyqcrwhrkd3gygk9pubimiqqxri4b2o+jcclg8+e8nzilveygwcrwpyf0jqjziyu/ho2tuucptn8hhcqnuzy1/94samozqhdeqaij7cd8dt8catghx3iwxgtfw/m29pnujr7tsqcrciavw1fsr6kavydi+5pj8yunviyhq7f72po3y9dbi7cxzdo1+duzcxh9cepaqyahjely/aqbtwaaaaasuvork5cyii=);     background-position: right top;     background-repeat: no-repeat;     -moz-box-shadow: none; } :invalid {   box-shadow: none; }  :-moz-submit-invalid {   box-shadow: none; }  :-moz-ui-invalid {   box-shadow:none; }

i have applied same rules other inputs have textarea no avail.

i'm not setup test should solve problem. reason it's not working on textarea because css looking input tags , not textarea tags. should add have input:valid , input:invalid

input:required:invalid, input:focus:invalid,  textarea:required:invalid, textarea:focus:invalid {     background-image: url(data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaaevjrefuenqku01oe1eq/mazstdrmqsxlvsjvku9ryohd8wfhr16kh5efa8esy6hxrwupbskz6e9v1cu4tgf0dzwdeqrgkhprrdbcvlpavan3ezu+llsunadlznhwhvzmjlvvpkhzky7iqfnatuafphhp/8uo87sgsadsp27hgym/lupy6lhdqsatm+bpfvqkp3ufykwcgmwcug6okmrrg3poaqngwjdd/922hobs5c/jja6x7aiut8vyvuavqxxshfiqcyrmzo8/n1n+b8h1souwivpsusvcj2majtvwbaidv+aqkhqqbogc+fbvorjyqendcch16/btkqdalc4e6jryhgggu18io3gmhzjuwub6/fqjyni/ybpcifhbdaapxfvcbvxxbvfbngfen8dkjogwad8dljv3krutceaehmn/hxz4p9bhncjhcyhnx52r0kv/xnuqvybnm+cp7xddxl5kajw0tmaf8qjnmvegek/slhubhpkdkirjdlvxomx3y9xcsmzybq+tpyk5hzsa2ns7lgdfwdbl6fzvhn92d7dgroh/730ybltizmedgpkfnhx4kxmjve2xgpfctrrd6ghrteh9zsl8xve+pwszj+otwvletzz/wlekd71l+zehhwz/gowabkp7awwnejfaaaaaelftksuqmcc);     background-position: right top;     background-repeat: no-repeat;     -moz-box-shadow: none; }  input:required:valid, textarea:required:valid {     background-image: url(data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaaepjrefuenrek79pfeeux9/uddd7v/aaqqneqokmjcrgwc7/qem/ygvxszjqyi/ehcchicymujignbsgzobqai5sayrw6imne0d2d/bymz3dgd+yqkehyiyc5guyb3y+77vfewnpreffhvxfawaajtbki7dff1rwk9vphx3mthp2iaipk5eztg8qmru38h7izmkfhaf4wh1r52654pr0oamzj2dkxyt/bbg1opzuy3d9au82vgem/5ltnjsclxwzfzrxawnqwjp0xuadibszu5duvujpzq7sfybksp1gjelb+pwpt8ccxm4+2+zlxx4gukilxwa2nc5chouacmepv20fkt+diawyenvi5vcabcigwzxlenidrcdwid0lfm5iumbibgrp8woesflfecgm23/zobzwn9a4c314a1ncom1oavccugyckps/p+pidviokg9pih6ylyqcrwhrkd3gygk9pubimiqqxri4b2o+jcclg8+e8nzilveygwcrwpyf0jqjziyu/ho2tuucptn8hhcqnuzy1/94samozqhdeqaij7cd8dt8catghx3iwxgtfw/m29pnujr7tsqcrciavw1fsr6kavydi+5pj8yunviyhq7f72po3y9dbi7cxzdo1+duzcxh9cepaqyahjely/aqbtwaaaaasuvork5cyii=);     background-position: right top;     background-repeat: no-repeat;     -moz-box-shadow: none; }

Comments

Post a Comment

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

i'm trying link specific pdf page msoutlook'10 or msword'10, #page=... anchor particularly useful , works fine elsewhere. unfortunately when click [ctr-k] in outlook or winword, links re-formatted assuming unc path. pdf file located on shared drive. using "file:" prefix links open pdf in adobe reader (outside of browser), , "http:" open inside browser. issue seem need open in browser "file:" prefix in order anchor work. know anchors work inside browser. outlook uses windows/explorer default program (based on file extension) seems open in adobe reader neglecting anchor. is aware of solution, link specific page or bookmark of shared-pdf ms outlook and/or winword link? common references: mailermailer.com/...anchor-tags-html-emails campaignmonitor.com/...anchor-links-in-email-newsletters/ stackoverflow.com/...anchor-in-pdf-document
Read more

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

consider code: test = function() { } t = new test(); (var = 0; < 8; i++) { result = t instanceof test; } if change number of iterations 8 9 , loop take 100 times longer complete in latest version of firefox (41.0.1). tested on 2 different pcs , magic limit 8. here jsperf test used: http://jsperf.com/instanceof-8-times-vs-9-times does have idea why might happen? seems specific instanceof . not happen if else object, example check property. note: filed bugzilla bug this. jan de mooij mozilla team has posted details in bugzilla thread . here's simplistic interpretation of highly technical answers: in i < 8 case, firefox smart enough hoist result = t instanceof test; statement out of loop (according tests, doesn't seem omit altogether). in i < 9 case, apparently doesn't optimization . why? reason not clear, related fact 9 iterations threshold above function considered "hot" enough run through jit compiler. i < 8 cas...
Read more

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -

following this guide setup app on digital ocean droplet, not working. site not loading , it's throwing: "gateway time-out". the puma server works, since ps aux | grep puma prints: root 15878 0.0 0.4 376832 2168 ? sl 12:50 0:00 puma 2.13.4 (unix:///var/www/myapp/shared/tmp/sockets/myapp-puma.sock) [20150930164940] root 15881 0.0 0.7 903676 3692 ? sl 12:50 0:06 puma: cluster worker 0: 15878 [20150930164940] root 24654 0.0 0.1 11748 916 pts/2 s+ 18:00 0:00 grep --color=auto puma my nginx config: user root; worker_processes 1; events { worker_connections 1024; } http { upstream puma { server unix:///var/www/myapp/shared/tmp/sockets/myapp-puma.sock; } server { listen 80; server_name myapp.com; root /var/www/myapp/current/public; access_log /var/www/myapp/current/log/access.log; error_log /...
Read more