Skip to content

Instantly share code, notes, and snippets.

@bendo01
Forked from mewdriller/chosen-bootstrap.css
Created March 10, 2013 03:17
Show Gist options
  • Save bendo01/5126963 to your computer and use it in GitHub Desktop.
Save bendo01/5126963 to your computer and use it in GitHub Desktop.
/*
* add this to your own css file,
* to overwrite the _chosen_ styling, to look more like bootstrap!
*
* note: for the error part to work, an .error class-name must be added
* to a wrapping DIV, to display the bootstrap error styling. I have
* just use the wrapping .control-group DIV
*
* credit: Rasmus Burkal, @rabu81
* Drew Miller, @mewdriller
*/
ul.chzn-choices {
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
div.error div.controls div.chzn-container ul.chzn-choices {
border-color: #B94A48;
}
div.error div.controls div.chzn-container-active ul.chzn-choices {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(185, 74, 72, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(185, 74, 72, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(185, 74, 72, 0.6);
}
div.controls ul.chzn-choices {
border-color: #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
div.chzn-container-active ul.chzn-choices {
border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
div.chzn-container a.chzn-single {
font-size: 14px;
line-height: 20px;
height: 24px;
padding-top: 4px;
}
div.chzn-container a.chzn-single div b {
background-position: 0 2px;
}
div.chzn-container-active a.chzn-single-with-drop div b {
background-position: -18px 3px;
}
div.chzn-container-single div.chzn-search input {
border: 1px solid #aaa;
font-size: 13px;
line-height: normal;
height: auto;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
div.chzn-container {
margin-bottom: 10px;
}
div.chzn-container-multi {
margin-bottom: 5px;
}
div.chzn-container-multi ul.chzn-choices li.search-choice {
font-size: 14px;
line-height: 14px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment