css & input type & search icon
bug
type="search"
<input
@input="autoSearch"
@change="autoSearch"
@click="addSearchHistory"
ref="search-input"
type="search"
class="search-input"
:placeholder="placeholder"
v-model="input"
/>
OK
type="text" / type="input"
<input
@input="autoSearch"
@change="autoSearch"
@click="addSearchHistory"
ref="search-input"
type="input"
class="search-input"
:placeholder="placeholder"
v-model="input"
/>
.search-delete{
position: absolute;
display: block;
top: 1rem;
right: calc(1.38rem);
.32rem;
height: .32rem;
border-radius: 50%;
background: url("../../images/search/remove.svg") no-repeat center center;
/* background: url("../../images/search/remove.svg") no-repeat center center fixed; */
opacity: 1;
/* background-color: transparent; */
}
css full background image
https://css-tricks.com/perfect-full-page-background-image/
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.search-delete{
position: absolute;
display: block;
top: 1rem;
right: calc(1.38rem);
.32rem;
height: .32rem;
border-radius: 50%;
background: url("../../images/search/remove.svg") no-repeat center center;
/* background: url("../../images/search/remove.svg") no-repeat center center fixed; */
opacity: 1;
/* background-color: transparent; */
}
css transparent background color
transparent, background, opacity
background-color: transparent;
https://cssreference.io/property/background-color/
https://stackoverflow.com/questions/11184117/transparent-css-background-color
.search-delete{
position: absolute;
display: block;
top: 1rem;
right: calc(1.38rem);
.32rem;
height: .32rem;
border-radius: 50%;
background: url("../../images/search/remove.svg");
opacity: 1;
/* background-color: transparent; */
}
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！