diff --git a/themes/default/css.php b/themes/default/css.php index 035833ec0..0ca150703 100644 --- a/themes/default/css.php +++ b/themes/default/css.php @@ -4189,7 +4189,24 @@ else { //default: white .domain-search-empty { padding: 8px 10px; color: ; - }; + } + + .domain-search-clear { + position: absolute; + right: 8px; + top: 50%; + transform: translateY(-50%); + background: none; + border: none; + cursor: pointer; + font-size: 14px; + color: #333; + opacity: 0.6; + padding: 0; + line-height: 1; + pointer-events: auto; + z-index: 2; + } - + {*//link to custom css file *} {if !empty($settings.theme.custom_css)} @@ -795,7 +795,24 @@ var input = document.createElement('input'); input.type = 'text'; input.className = 'formfld domain-search-input'; - input.placeholder = '{/literal}{$text.label_search_domains}{literal}...'; + input.placeholder = '{/literal}{$text.label_search_domains}{literal}..'; + + var clear_button = document.createElement('button'); + clear_button.type = 'button'; + clear_button.className = 'domain-search-clear'; + clear_button.innerHTML = '×'; + clear_button.setAttribute('aria-label', 'Clear search'); + picker.appendChild(clear_button); + + clear_button.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + input.value = ''; + active_index = -1; + clear_button.style.display = 'none'; + render_results(); + input.focus(); + }); var results = document.createElement('div'); results.className = 'domain-search-results'; @@ -831,6 +848,7 @@ function sync_input_to_select() { input.value = get_selected_label(); + clear_button.style.display = (input.value.trim() !== '') ? 'inline-flex' : 'none'; } // Results panel is on document.body; match .formfld / theme input typography @@ -948,6 +966,9 @@ } results.appendChild(row); } + // Toggle clear button visibility based on current input + clear_button.style.display = (input.value.trim() !== '') ? 'inline-flex' : 'none'; + open_results(); window.requestAnimationFrame(position_results_panel); }