Desidero creare un campo di input come quello di Android Ice Cream Sandwich solo in HTML/CSS e senza utilizzare immagini.
Sono bloccato con questi piccoli bordi (l'immagine sotto), Sarebbe bello se qualcuno potesse aiutare.Campo di immissione simile a ICS per Android in CSS
risposta
EDIT
mi piacerebbe includere il commento di owencm per le persone inciampo in tutta questa domanda, in quanto lo trovo molto elegante:
CSS
input.holo[type='text'] {
/* You can set width to whatever you like */
width: 200px;
font-family: "Roboto", "Droid Sans", sans-serif;
font-size: 16px;
margin: 0;
padding: 8px 8px 6px 8px;
position: relative;
display: block;
outline: none;
border: none;
background: bottom left linear-gradient(#a9a9a9, #a9a9a9) no-repeat, bottom center linear-gradient(#a9a9a9, #a9a9a9) repeat-x, bottom right linear-gradient(#a9a9a9, #a9a9a9) no-repeat;
background-size: 1px 6px, 1px 1px, 1px 6px;
}
input.holo[type='text']:hover, input.holo[type='text']:focus {
background: bottom left linear-gradient(#0099cc, #0099cc) no-repeat, bottom center linear-gradient(#0099cc, #0099cc) repeat-x, bottom right linear-gradient(#0099cc, #0099cc) no-repeat;
background-size: 1px 6px, 1px 1px, 1px 6px;
}
HTML
<input type='text' class='holo'/>
JSFiddle http://jsfiddle.net/QKm37/
soluzione originale
<span style="
border-bottom: solid 1px cyan;
border-left: solid 1px cyan;
margin: 20px;
border-right: solid 1px cyan;
overflow: visible;
max-height: 0.2em;
display: inline-block;
padding: 2px;
">
<input type="text" style="
outline: none;
border: none;
background: transparent;
display: inline-block;
position: relative;
bottom: 0.8em;
">
</span>
ho una soluzione forse migliore .. modificherò il tuo post scusami per quello .. ma è chiuso –
i seguenti lavori in Chrome senza tag aggiuntivi: http://jsfiddle.net/QKm37/ – owencm
'' ... mi prendi in giro? –
- 1. Android HTML5 - tastiera morbida si sovrappone al campo di immissione
- 2. Ottieni etichetta per il campo di immissione
- 3. Campo di immissione nascosto Cakephp
- 4. CSS - effetto simile a rowspan
- 5. Webview Android, campo di immissione file filechooser non viene visualizzato
- 6. Crittografia dispositivo ICS Android
- 7. cos'è "BasicDream" in Android ICS?
- 8. qualcosa di simile a SDWebImage in iOS per Android?
- 9. jquery come svuotare il campo di immissione
- 10. Disabilita schermate in android ics
- 11. Numero di compilazione ICS Android
- 12. minifying e Obsfucating CSS simile a JavaScript
- 13. Seleziona() Campo di immissione con Knockout.js
- 14. lockscreen nativo ICS Android
- 15. Tipo immissione ingresso password password campo focus
- 16. Convalida immissione indirizzo in Android
- 17. Come mettere a fuoco un campo di immissione sul browser Android tramite javascript o jquery
- 18. Diminuisce l'altezza del campo di immissione Bootstrap di Twitter?
- 19. Fotocamera emulatore ICS Android
- 20. CSS: campi di immissione testo arrotondati
- 21. Come limitare il tempo di immissione per edittext in Android
- 22. Problema di aggiornamento di Elenco ICS Android
- 23. Android - Dimensione buffer MediaPlayer in ICS 4.0
- 24. Strumento di storyboard simile a iOS per il progetto Android?
- 25. Come creare il campo di immissione della password in django
- 26. Ottieni testo dal campo di immissione in Unity3D con C#
- 27. Font Kannada su Android ICS
- 28. Esiste un selettore CSS standard simile a: eq() in jQuery?
- 29. jQuery interrompere setTimeout se utente clicca nel campo di immissione
- 30. autorizzazione ACCESS_NETWORK_STATE su Android ICS
Siamo spiacenti, non hanno visto la tua risposta. Provato questo: input [type = "text"] { border: ciano solido 1px; border-top: solido trasparente 1px; altezza: 5px; overflow: visibile; } In nessun modo, l'overflow è sempre nascosto :( –
possiamo fare questa finestra di input attraverso gli pseudo-elementi prima e dopo? – Mak
Questa domanda potrebbe essere interessante con un paio di soluzioni: http://stackoverflow.com/q/14479606/1254484 – Pascal