Cari tutti,
oggi mi chiedevo se sarebbe stato possibile emulare una «select editabile» facendo uso di nient'altro che radiobox, textbox e CSS (senza javascript). Bene, la risposta a quanto pare sembrerebbe essere di sì.
Posto questa piccola bozza (la posto qui perché chiunque voglia una select editable è nel forum javascript che viene a cercarla). È fatta di corsa, colori sono scelti a caso e ho visto che con Chrome c'è un piccolo sfasamento che andrebbe aggiustato (mentre con Firefox va alla grande) – ma nulla che ne infici il funzionamento. Su IE8 non va.
Qualcun@ ha IE10 installato? Ha voglia di provarlo? Date un occhiata al codice HTML per capirne il meccanismo!
Buon divertimento
codice:<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Esempio</title> <style type="text/css"> /* Stili di carattere generale riguardanti i vari campi dei form */ fieldset.elist, input[type="text"], select, option, fieldset.elist ul, fieldset.elist > legend, fieldset.elist input[type="text"], fieldset.elist > legend:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input[type="text"] { padding: 0 4px; } textarea { width: 500px; height: 200px; padding: 4px; } textarea, input[type="text"], fieldset.elist ul, select, fieldset.elist > legend { border: 2px #cccccc solid; border-radius: 10px; } input[type="text"], fieldset.elist, select, fieldset.elist > legend { height: 32px; font-family: Tahoma; font-size: 14px; } input[type="text"]:hover, textarea:hover, select:hover, fieldset.elist:hover > legend { background-color: #ddddff; } option { height: 30px; padding: 5px 4px; } select { padding: 4px 4px 4px 0; } fieldset.elist > legend:after, fieldset.elist label { height: 28px; } input[type="text"], fieldset.elist { width: 316px; } input[type="text"]:focus { background: #ffcccc url("data:image/gif;base64,R0lGODlhEAAQANU5APnoxuvr6+uxPdvb2+rq6ri4uO7qxunp6dPT06SHV+/rx8vLy+nezLO0sbe3t9Ksas+qaaCEV8rKyp2dnf39/QAAAK6ursifZHFxcc/Qzu3mxYyMjExCJnV1dc6maO7u7o+Pj2tXNoaGhtfDpKCDVu3lxM+tcaKEV9bW1qOFVWNjY8KrisTExNra2nBbObGxsby8vO/mu7Kyso9ZAuzs7MSgAIiKhf///8zMzP///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADkALAAAAAAQABAAAAaXwJxwSCwOYzWkMpkkZmoAqDQaJdpqAqw2m53NRjlboAarFczomcE0C99o8DgNMVM8Tm3bbYDr9x11DwkzDG5yc2oQJIRCenx/MxoeETM2Q3pxATMlF4MYlo17OAsdLispMyAioIY0BzMcITMTKBasjgssFTMqGxItMjYUoTQBBAQHxgE0wZcfMtDRMi/QrA022NnaNg1CQQA7") no-repeat 2px center !important; padding: 0 4px 0 20px !important; } select option:not(:checked), textarea:focus { background-color: #ffcccc; } input[type="text"]:focus, textarea:focus, select:focus, fieldset.elist > legend { border: 2px #ccaaaa solid; } fieldset { border: 2px #af3333 solid; border-radius: 10px; } /* Stili riguardanti esclusivamente le select editabili (ovvero fieldset con [class=elist]) */ fieldset.elist { display: inline-block; position: relative; vertical-align: middle; overflow: visible; padding: 0; margin: 0; border: none; } fieldset.elist ul { position: absolute; width: 100%; max-height: 320px; padding: 0; margin: 0; overflow: hidden; background-color: transparent; } fieldset.elist:hover ul { background-color: #ffffff; border: 2px #af3333 solid; left: 2px; overflow: auto; } fieldset.elist ul > li { list-style-type: none; background-color: transparent; } fieldset.elist label { display: none; width: 100%; } fieldset.elist input[type="text"] { width: 100%; height: 30px; line-height: 30px; border: none; background-color: transparent; border-radius: 0; } fieldset.elist > legend { display: block; margin: 0; padding: 0 0 0 5px; position: absolute; width: 100%; cursor: default; background-color: #ccffcc; line-height: 30px; font-style: italic; } fieldset.elist:hover > legend { position: relative; overflow: hidden; } fieldset.elist > legend:after { width: 20px; content: "\2335"; float: right; text-align: center; border-left: 2px #cccccc solid; font-style: normal; cursor: default; } fieldset.elist:hover > legend:after { background-color: #99ff99; } fieldset.elist ul input[type="radio"] { display: none; } fieldset.elist input[type="radio"]:checked ~ label { display: block; width: 292px; background-color: #ffffff; } fieldset.elist:hover input[type="radio"]:checked ~ label { width: 100%; } fieldset.elist:hover label { display: block; height: 100%; } fieldset.elist label:hover { background-color: #3333ff !important; } fieldset.elist:hover input[type="radio"]:checked ~ label { background-color: #aaaaaa; } </style> </head> <body> <form name="modulo" method="get" action="test.php"> <fieldset> <legend>Select editabile in puro CSS</legend> Digita il tuo nome (textbox): <input type="text" name="nome" /></p> Dai un voto a questo sito (normale select): <select name="voto"> <option>Uno</option> <option>Due</option> <option>Tre</option> </select></p> <div>Scegli il tuo cantante preferito (pseudoselect editabile): <fieldset class="elist"> <legend>Scegli&hellip;</legend> <ul> [*]<input type="radio" name="cantante-chosen" value="1" id="cantante-switch_1" checked /><label for="cantante-switch_1"><input type="text" name="cantante-item_1" value="predefinito 1" /></label> [*]<input type="radio" name="cantante-chosen" value="2" id="cantante-switch_2" /><label for="cantante-switch_2"><input type="text" name="cantante-item_2" value="predefinito 2" /></label> [*]<input type="radio" name="cantante-chosen" value="3" id="cantante-switch_3" /><label for="cantante-switch_3"><input type="text" name="cantante-item_3" value="predefinito 3" /></label> [*]<input type="radio" name="cantante-chosen" value="4" id="cantante-switch_4" /><label for="cantante-switch_4"><input type="text" name="cantante-item_4" value="predefinito 4" /></label> [/list] </fieldset> </div> Scrivi un breve commento <textarea name="commento"></textarea></p> <input type="submit" value="Send" /></p> </fieldset> </form> </body> </html>
Rispondi quotando
