css & input type & search icon

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://stackoverflow.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; */
}

---

转载于:https://www.cnblogs.com/xgqfrms/p/11080932.html