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);

    width: .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);

    width: .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://*.com/questions/11184117/transparent-css-background-color

.search-delete{

    position: absolute;

    display: block;

    top: 1rem;

    right: calc(1.38rem);

    width: .32rem;

    height: .32rem;

    border-radius: 50%;

    background: url("../../images/search/remove.svg");

    opacity: 1;

    /* background-color: transparent; */

}

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---