react-mdl-selectfield
Version:
React MDL SelectField Component
1 lines • 1.68 kB
CSS
.mdl-selectfield{position:relative;width:300px}.mdl-selectfield.mdl-selectfield--menu-below .mdl-menu__container{margin-top:-20px}.mdl-selectfield.mdl-selectfield--empty .mdl-menu__container{display:none}.mdl-selectfield.mdl-selectfield--error .mdl-selectfield__arrow{color:#d50000}.mdl-selectfield .mdl-textfield{width:100%}.mdl-selectfield .mdl-textfield.is-invalid .mdl-textfield__label{color:#d50000;font-size:16px}.mdl-selectfield .mdl-selectfield__arrow{cursor:pointer;position:absolute;font-size:20px;line-height:27px;top:20px;right:0;color:#ccc}.mdl-selectfield.mdl-selectfield--floating-label .mdl-menu__container{margin-top:-46px}.mdl-selectfield .mdl-menu__container{width:100%;margin-top:-52px}.mdl-selectfield .mdl-menu__container .mdl-menu{width:100%;max-height:250px;overflow-x:hidden;overflow-y:auto}.mdl-selectfield .mdl-menu__container .mdl-menu .mdl-menu__item{height:32px;line-height:32px}.mdl-selectfield .mdl-menu__container .mdl-menu .mdl-menu__item.mdl-menu__item--selected{color:#ff4081}.mdl-selectfield .mdl-menu__container .mdl-menu .mdl-menu__item.mdl-menu__item--disabled{color:rgba(0,0,0,.26)}.mdl-selectfield .mdl-menu__container .mdl-menu .mdl-menu__item.mdl-menu__item--disabled:hover{background:#fff}.mdl-multiselectfield{position:relative;width:300px}.mdl-multiselectfield .mdl-taglist{margin-top:5px}.mdl-multiselectfield .mdl-taglist .mdl-button{position:relative;min-width:auto;padding:0 6px;margin:0 6px 7px 0;height:24px;line-height:24px;text-align:left;font-size:14px;text-transform:none;box-shadow:0 1px 1px 0 rgba(0,0,0,.24)}.mdl-multiselectfield .mdl-taglist .mdl-button .material-icons{margin-left:4px;font-size:12px}