input:-webkit-autofill 관련 질문에요~
본문
검색창 입력시 자동완성시 배경색을 변경하려고
.xans-layout-searchheader input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px #17197e inset ; -webkit-text-fill-color: #fff; border-radius:50px; }
적용시켰는데
라인이 생기네요. border-radius를 넣으니 바깥라인이 생기고 border-radius를 삭제하니 안나오네요
box-shadow 경우 바깥쪽으로 그림자효과가 안나오도록 하는 방법이 있을까요??
답변 1
라인은 왜 생기는지 모르겠습니다.
다른 UI 랑 겹친것이 아닌가 생각해 봅니다.
단순히 이렇게만 해봤을때 정상표현 되는것 같습니다.
<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>
답변을 작성하시기 전에 로그인 해주세요.
