Archivio della categoria: jQuery Mobile

[jQuery Mobile] How to delete the border-radius from the tag Flip Switch

2 Repliche

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 :D