2016-07-07 26 views
7

Ho due menu a tendina su http://www.jiyubi.com/#/tour_package/homesostituire stile ui-selezionare per stile originale

Quello di sinistra è applicata angular-ui-select/dist/select.min.css

ma mi piacerebbe quello giusto stile.

Qual è il modo più veloce di ottenerlo?

Perché sembra che angular-ui-select modificherà l'elemento DOM.

Non so quale approccio possa far sì che quello sinistro abbia lo stesso stile di quello giusto.

enter image description here

enter image description here

stile attuale http://www.jiyubi.com/#/tour_package/home

Questo è desiderata stile http://52.196.210.40:3000/portal/package_home.html

Grazie

+0

si può dare un po 'più contesto? Non sono abbastanza sicuro di cosa stai cercando. – jmealy

+1

Puoi mostrarci un collegamento con lo stile di selezione desiderato? – mrlew

+0

@mrlew ho aggiornato il post, vedo il fondo del post per accedere alla pagina, grazie – user3675188

risposta

4

angolare-ui-select ha tre costruiti in temi:

citazione da [1]:

ui-SELECT ha i seguenti temi:

  • bootstrap ispirato dal quadro bootstrap popolare.
  • select2 ispirate da select2 widget di jQuery
  • selectize ispirato selectize widget di jQuery

I temi possono essere fissati a un livello globale utilizzando un provider:

var app = angular.module('app', ['ui.select']); 

app.config(function(uiSelectConfig) { 
    uiSelectConfig.theme = 'bootstrap'; 
}); 

o come proprietà sull'elemento select come:

Se questi stili già pronti non sono ispirati a una struttura corretta o altrimenti non soddisfano il tuo occhio, puoi sempre creare il tuo css sulle classi che angular-ui-select usa, posizionare lo stile desiderato e usarlo ! importante con le definizioni CSS per sovrascrivere gli originali.

.style.not.pleasing.eye { 
    something: sth_new !important; 
} 

Le mie fonti:

[1] https://github.com/angular-ui/ui-select/wiki/ui-select