#autoComplete_wrapper {
position: relative;
display: inline-block;
}
#autoComplete {
position: relative;
margin-top: 20px;
padding: 0 2rem 0 3.5rem;
height: 2.5rem;
width: 6rem;
outline: none;
border-radius: 50rem;
border: 0.05rem solid #108EE9;
caret-color:#108EE9;
color: rgba(255, 255, 255, 0);
background-image: url(https://www.ubiqu.id/css/images/magnifier.svg);
background-color: #ffffff;
background-repeat: no-repeat;
background-size: 1.7rem;
background-origin: border-box;
background-position: center;
transition: all 0.4s ease;
-webkit-transition: all -webkit-transform 0.4s ease;
text-overflow: ellipsis;
}
#autoComplete::placeholder {
color: rgba(16,142,233, 0);
transition: all 0.3s ease;
}
#autoComplete:hover::placeholder {
color: rgba(16,142,233, 0.3);
transition: all 0.3s ease;
-webkit-transition: all -webkit-transform 0.3s ease;
}
#autoComplete:focus::placeholder {
padding: 0.1rem 0.6rem;
color:#108EE9;
transition: all 0.3s ease;
-webkit-transition: all -webkit-transform 0.3s ease;
}
#autoComplete::selection {
color: transparent;
}
#autoComplete:focus::selection {
color: #fff;
background-color: #108EE9;
}
#autoComplete:hover {
padding: 0 2rem 0 3.5rem;
color: #108EE9;
height:2.5rem;
width: 20rem;
background-image: url(https://www.ubiqu.id/css/images/magnifier.svg);
background-size: 1.7rem;
background-color: #fff;
background-position: left 1.5rem top 0.7rem;
transition: all 0.3s ease;
-webkit-transition: all -webkit-transform 0.3s ease;
}
#autoComplete:focus {
padding: 0 2rem 0 3.5rem;
color: #108EE9;
height: 2.5rem;
width: 20rem;
border: 0.05rem solid #108EE9;
background-image: url(https://www.ubiqu.id/css/images/magnifier.svg);
background-color: #fff;
background-size: 1.7rem;
background-position: left 1.5rem top 0.7rem;
box-shadow: rgba(16,142,233, 0.1) 0px 0px 20px 5px;
}
#autoComplete_list {
position: relative;
z-index: 1000;
padding: 0;
left: 0;
right: 0;
margin-top: 0;
margin-left: auto;
margin-right: auto;
width: 20rem;
transition: all 0.1s ease-in-out;
-webkit-transition: all -webkit-transform 0.1s ease;
}
.autoComplete_result {
margin: 0 auto !important;
padding: 0.6rem;
max-width: 280px;
border: 0.05rem solid #e3e3e3 !important;
list-style: none;
text-align: left;
font-size: 1rem;
color: rgb(123, 123, 123);
transition: all 0.1s ease-in-out;
background-color: #fff;
}
.autoComplete_result::selection {
color: rgba(#ffffff, 0);
background-color: rgba(#ffffff, 0);
}
.autoComplete_result:last-child {
border-radius: 0;
}
.autoComplete_result:hover {
cursor: pointer;
background-color: rgba(255, 248, 248, 0.9);
border-left: 2px solid #108EE9;
border-right: 2px solid #108EE9;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
}
.autoComplete_result:focus {
outline: none;
background-color: rgba(255, 248, 248, 0.9);
border-left: 2px solid #108EE9;
border-right: 2px solid #108EE9;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
}
.autoComplete_highlighted {
opacity: 1;
color: #108EE9;
font-weight: bold;
}
.autoComplete_highlighted::selection {
color: rgba(#ffffff, 0);
background-color: rgba(#ffffff, 0);
}
.autoComplete_selected {
cursor: pointer;
background-color: rgba(255, 248, 248, 0.9);
border-left: 2px solid #108EE9;
border-right: 2px solid #108EE9;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
}
@media only screen and (max-width: 600px) {
#autoComplete {
width: 5rem;
}
#autoComplete:focus {
width: 15rem;
background-size: 1.7rem;
background-position: left 1.5rem top 0.7rem;
}
.autoComplete_result:first-child {
border-radius: 0;
}
.autoComplete_result:last-child {
border-radius: 0;
}
.autoComplete_result:only-child {
border-radius: 0;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
#autoComplete {
border-width: 1px;
}
#autoComplete:hover {
border-width: 1px;
}
#autoComplete:focus {
border-width: 1px;
}
}
@-moz-document url-prefix() {
#autoComplete {
border-width: 1px;
background-size: 1.2rem;
background-origin: border-box;
background-position: center;
}
#autoComplete:hover {
border-width: 1px;
}
#autoComplete:focus {
border-width: 1px;
background-position: left 1.1rem top 0.8rem;
}
}