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


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 😀



VI RICORDO CHE È TUTTO A SCOPO ILLUSTRATIVO.

NON MI ASSUMO NESSUNA RESPONSABILITÀ NELL’ USO CHE NE FARETE.

IO E I MIEI TUTORIAL NON NE SIAMO RESPONSABILI.

UTILIZZARE SOFTWARE CONTRAFFATTO E' UN REATO.

Licenza Creative Commons
Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 4.0 Internazionale.

Ti è piaciuto il mio articolo? Ti piacerebbe offrirmi un caffè? Con PayPal è facile


Vincenzo

Vincenzo

Full Stack Web && Mobile Developer Un piccolo blog che ho reso libero come diario personale, se serve a me, potrebbe servire ad altri.

2
Lascia una recensione

avatar

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

  Subscribe  
Notificami
Floryn90
Ospite
Floryn90

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