SIR
목록으로

input:-webkit-autofill 관련 질문에요~

동동가이
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전 조회 1,365
답변 1
목록



검색창 입력시 자동완성시 배경색을 변경하려고

.xans-layout-searchheader input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px #17197e inset ; -webkit-text-fill-color: #fff; border-radius:50px; }

적용시켰는데

238063057_1669096146.9194.png

 



라인이 생기네요. border-radius를 넣으니 바깥라인이 생기고 border-radius를 삭제하니 안나오네요

box-shadow 경우 바깥쪽으로 그림자효과가 안나오도록 하는 방법이 있을까요??



#inputautofill

답변 1개

라인은 왜 생기는지 모르겠습니다.

다른 UI 랑 겹친것이 아닌가 생각해 봅니다.

단순히 이렇게만 해봤을때 정상표현 되는것 같습니다.

Copy 
<style>
.xans-layout-searchheader input {
    padding: 1em;
    background-color: #eee;
    border: 0;
    border-radius:50px;
    outline: none;
    -webkit-appearance: none;
}
.xans-layout-searchheader input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px #17197e inset;
    -webkit-text-fill-color: #fff;
}
</style>

<div class="xans-layout-searchheader">
    <input type="text" name="q" />
</div>
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고