Skip to content

Instantly share code, notes, and snippets.

@artlili
Created May 17, 2019 06:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save artlili/24525b6fdb14a129f92c56e09cbb7b84 to your computer and use it in GitHub Desktop.
Save artlili/24525b6fdb14a129f92c56e09cbb7b84 to your computer and use it in GitHub Desktop.
Select ui
JS Placeholder
$.widget( 'app.selectmenu', $.ui.selectmenu, {
_drawButton: function() {
this._super();
var selected = this.element
.find( '[selected]' )
.length,
placeholder = this.options.placeholder;
if (!selected && placeholder) {
this.buttonItem.text(placeholder);
}
}
});
// Up
.ui-button
background: none
margin: 0
border: none
padding: 0
height: 40px
line-height: 40px
text-indent: 15px
border: 1px solid #43BD85
&:hover,
&:focus
background: none
outline: none
color: #000
border: 1px solid #43BD85
.ui-icon
background-image: none
// Arrow
.ui-selectmenu-icon.ui-icon
width: 0
height: 0
background-image: none
border-top: 10px solid #37465F
border-left: 8px solid transparent
border-right: 8px solid transparent
position: relative
top: 50%
transform: translateY(-50%)
right: 15px
&:hover
background-image: none
//ACTIVE arrow
.ui-selectmenu-button-open
.ui-selectmenu-icon.ui-icon
border: none
border-bottom: 10px solid #37465F
border-left: 8px solid transparent
border-right: 8px solid transparent
// Dropdown
.ui-widget.ui-widget-content
border: 1px solid #43BD85
padding: 0
// Dropdown item
.ui-menu .ui-menu-item
> div
padding: 0
background: none
margin: 0
border: none
padding: 0
height: 40px
line-height: 40px
text-indent: 10px
// Dropdown item hover
.ui-widget-content .ui-state-active
background-color: #37465F
border: none
margin: 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment