Salve a tutti,
in questo articolo spiegerò come eliminare il border radius dal tag custom Flip Switch.
La versione che andremo a trattare è l’ultima stabile, ovvero la 1.3.2 .
Le classi che richiedono la personalizzazione sono:
.ui-btn-corner-all .ui-corner-all .ui-slider-switch |
Per eliminare il border-radious (bombatura o arrotondamento) di questi “oggetti” basta implementare dopo l’inclusione del css di jquery mobile il seguente style:
.ui-btn-corner-all, .ui-corner-all, .ui-slider-switch { -webkit-border-top-left-radius: 0px !important; -webkit-border-top-right-radius: 0px !important; -webkit-border-bottom-right-radius: 0px !important; -webkit-border-bottom-left-radius: 0px !important; -moz-border-radius-topleft: 0px !important; -moz-border-radius-topright: 0px !important; -moz-border-radius-bottomright: 0px !important; -moz-border-radius-bottomleft: 0px !important; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; } |
Così facendo avrete il vostro flip switch completamente esente dal border radius.
DEMO: http://jsfiddle.net/e26ac/1/
Saluti 
Ciao! Sono sempre io a “romperti un pò”
Il tuo codice di sopra può essere ottimizzato come segue:
.ui-btn-corner-all, .ui-corner-all, .ui-slider-switch {
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
-ms-border-radius: 0px !important;
border-radius: 0px !important
}
Il codice che ti ho apena postato sopra può essere ulteriormente ottimizzato in quanto tutti i browser si sono adeguati allo standard come riporta il sito W3Schools.com:
.ui-btn-corner-all, .ui-corner-all, .ui-slider-switch {
border-radius: 0px !important
}
Un saluto,
Florin
Hola Floryn,
si è ovviamente ottimizzato per browser desktop…. ma purtroppo il browser mobile e tecnologie come phonegap non si sono ancora adeguati agli standard per eccellenza, quindi il codice (anche se poco ottimizzato) funziona al 100% su ogni piattaforma mobile, mentre il tuo (ottimizzato) funziona senza problemi sui desktop.
PS: mi fa piacere vederti ogni tanto sul mio blog ^_^