.hs-search-field__input {
    color: #111d33;
    border-bottom: 3px solid #111d33;
    appearance: searchfield;
    -moz-appearance: searchfield;
    -webkit-appearance: searchfield;
    -ms-appearance: searchfield;
    color: #fff;
    border-radius: 0px !important;
}
<input type="search" class="hs-search-field__input" name="term" autocomplete="off" aria-label="Search" placeholder="Search">

मैंने जोड़ा और यह क्रोम में ठीक काम कर रहा है लेकिन फ़ायरफ़ॉक्स, इंटरनेट एक्सप्लोरर और एमएस एज में स्पष्ट बटन काम नहीं कर रहा है:

Browser output

2
Anzer Mansuri 23 अक्टूबर 2019, 16:22

1 उत्तर

सबसे बढ़िया उत्तर

खोज फ़ील्ड पर स्पष्ट बटन क्रोम के लिए विशिष्ट है। एकमात्र समाधान जो मैं सोच सकता हूं वह है क्रोम से स्पष्ट बटन को हटाना और एक कस्टम स्पष्ट बटन जोड़ना। हालाँकि, यदि कोई अन्य ब्राउज़र भविष्य में इस ब्राउज़र विशिष्ट कार्यक्षमता को जोड़ने का निर्णय लेता है, तो यह समस्याएँ उत्पन्न कर सकता है।

यह शायद वह उत्तर नहीं है जिसकी आप तलाश कर रहे थे और आप शायद पहले से ही जानते हैं कि यह कैसे करना है, लेकिन मैंने एक उदाहरण दिया है कि क्रोम से स्पष्ट बटन को कैसे हटाया जाए और एक कस्टम स्पष्ट बटन बनाया जाए।

// Get clear buttons
const clear = document.querySelectorAll('.clear');

// Loop through clear buttons. 
// This is so you can have multiple search fields on a page.
for (let i = 0; i < clear.length; i++) {
   // Add a click event listener to each clear button
   clear[i].addEventListener("click", function() {
     // Clear sibling search input
     clear[i].previousElementSibling.value='';
   });
}
/* Remove chrome clear button */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}

/* Basic clear button styling */
.clear {
 position:absolute;
 right:4px;
 top:2px;
 cursor:pointer;
 display:inline-block;
}

/* Basic search wrapper and input styling */
.search-wrap {
 display:inline-block;
 position:relative;
}
.search-wrap input[type="search"] {
 padding-right:20px;
}
<div class="search-wrap">
  <input type="search">
  <div class="clear">X</div>
</div>
1
WizardCoder 23 अक्टूबर 2019, 15:31