react-autocomplete-widget
Version:
A lightweight autocomplete widget with an option of showing results in a handy ListView. Uses no extra stylesheets or dependencies!
2 lines • 2.31 kB
CSS
.autocomplete{width:100%;position:relative}.autocomplete input::-webkit-calendar-picker-indicator{display:none}.autocomplete .autocomplete__input{width:100%;display:block;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;border:1px solid #ccc;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.autocomplete .autocomplete__input:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.autocomplete .autocomplete__icon_delete{top:6px;float:right;right:37px;position:absolute}.autocomplete .autocomplete__icon_delete svg{position:absolute;display:inline-block;height:23px;width:35px;z-index:3}.autocomplete .autocomplete__icon_search{top:8px;float:right;right:25px;position:absolute}.autocomplete .autocomplete__icon_search svg{position:absolute;display:inline-block;height:20px;width:15px;z-index:3}.autocomplete .autocomplete__options,.listView{width:100%}.listView{max-height:100px }.listView .listView__listGroup{width:100%;margin-top:10px;padding:0;max-height:100px;overflow:auto;border-bottom:1px solid #ddd}.listView .listView__listGroup .listView__option{height:32px;position:relative;display:block;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd;text-align:center}.listView .listView__listGroup .listView__option .listView__label{line-height:32px;position:absolute;display:inline-block;max-width:50%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;word-wrap:break-word;transform:translateX(-50%)}.listView .listView__listGroup .listView__imgContainer{float:right;top:15%;position:relative}.listView .listView__listGroup .listView__imgContainer svg{height:23px;width:35px;position:relative}body{margin:0;padding:0;text-align:center;font-size:14px;line-height:1.42857143;color:#333}#root{width:40%;height:30%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}
/*# sourceMappingURL=autocomplete.css.map*/