input-search削除ボタンCustom

2787 ワード

リファレンステキストリンク

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

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: 값;}調整ボタンの位置を設定することで

Reference

この問題について(input-search削除ボタンCustom), 我々は、より多くの情報をここで見つけました https://velog.io/@dkahsem27/input-search-삭제버튼-커스텀

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

[Project 1] Open Sea

[PS]最低価格と最高価格(LV 2)