input-search削除ボタンCustom


for chrome
input[type=search] {padding-right: 입력값;}

input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
    -webkit-appearance: none;
    width: 입력값; height: 입력값; background: url(경로) center center no-repeat;
    cursor: pointer;
}
or
input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    width: 입력값; height: 입력값; background: url(경로) center center no-repeat;
    cursor: pointer;
}
point
  • display: none;ではなく-webkit-appearance: none;
  • input[type=search]::-webkit-search-cancel-button {background-image: url();}カスタマイズするアイコン画像を読み込みます.widthとheightの値をアイコンサイズ
  • に設定
  • input[type=search] {padding-right: 값;}調整ボタンの位置を設定することで