Editing input type="search" Pseudo-element Button ('x')

Question

I'm trying to make a search bar that will look nice. What I did is, I made an image of an search bar and I'm adding the image to the back-ground of the input and I'm editing the place and the size that the font will appear. The only thing that I can't find a way to edit is the small 'x' button that appears when I'm using input type search. I want to move it a little bit left so it will fix my search bar image.

#search {
  width: 480px;
  height: 49px;
  border: 3px solid black;
  padding: 1px 0 0 48px;
  font-size: 22px;
  color: blue;
  background-image: url('images/search.jpg');
  background-repeat: no-repeat;
  background-position: center;
  outline: 0;
}

<input id="search" name="Search" type="search" value="Search" />

Penates

Your question is incomplete. The example you're giving does not work to reproduce the issue you describe. – Shuman

@Shuman it does, but in Webkit only. – Chinchin

@Yuriy Actually in IE 11 you get the x in input fields, but how to change it is a bit more difficult, in FireFox you don't have it, yet. – Katharyn

@Paraíso Thanks for the tip. Updated my answer for IE10+ to use -ms-clear – Chinchin

I think the answer you are looking for, can be found here: davidbcalhoun.com/2012/… – Vasileior

Here is a solution I tried. jsfiddle.net/chandrasekarg/eb2yvgLd/1 – Allotrope

Answer 1

For anyone finding themselves here (as I did) thinking "how do I inspect this element to apply custom styles?", you'll need to enable the user agent shadow DOM to make these vendor elements accessible.

For WebKit (Safari) & Blink (Chrome,Edge,Opera,Brave) browsers, follow these steps:

1. Open DevTools (Ctrl+Shift+I)
2. Find the gear icon, top-right and click to open up the dropdown menu
3. In the context menu that opens, under "Preferences", find "Elements" towards the bottom and enable "Show user agent shadow DOM"

As you can see, I'm a man of culture, if there is a dark theme, I use it

Quetzal

This is not an answer to the question asked. – Vday

@JoshHabdas It's not, but it's plenty helpful. Learned something new when I have to deal with issues like OP's question. – Backup

It is the greatest answer there. More of the teach me fish rather than here the fish. So with that, you don't need to go and ask people how to? You just figure it out by yourself. A great easy way to do it. – Carner

Answer 2

Styling the "x" cancel search button in Webkit browsers

Assuming you're talking about "Cancel search" [X] icon that appeas in Webkit browsers only (Chrome, Safari, Opera) you can use -webkit-search-cancel-button pseudo-element. E.g:

#Search::-webkit-search-cancel-button{
    position:relative;
    right:20px;    
}

Demo: http://jsfiddle.net/5XKrc/1/

Screenshot:

Using this approach you can even create your own cancel button, for example this style:

#Search::-webkit-search-cancel-button{
    position:relative;
    right:20px;  

    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius:10px;
    background: red;
}

Instead of [X] will create a red circle.

Demo http://jsfiddle.net/5XKrc/3/

Screenshot:

For IE10 and above you can use following to move the button:

#Search::-ms-clear{
   margin-right:20px
}

Oh and do use placeholder="Search" instead of value="Search" - it will display word "search" when input is empty - and will automatically remove it when user types something.

Chinchin

Is it possible to create on with JS, and what would be the easiest way to do this? – Piccadilly

@Piccadilly it's possible: #6259021 – Rigid

For your example doesn't it disable the functionality? I'm not able to actually click the clear button and have it clear the input. – Caliphate

what to do for this question ?? #45412993 – Taffy

how to change the color of cross – Scaffolding

Still not supported in Firefox! :E – Kesley

Answer 3

2022 Cross-browser consistent approach

Here is a cross-browser implementation of the Clear Search "x" button, It uses the solid times-circle SVG from FontAwesome for the icon and works for both dark and light backgrounds. It also standardizes Safari to adopt the Chrome implementation to only show the icon when the form field has focus.

input[type="search"] {
  border: 1px solid gray;
  padding: .2em .4em;
  border-radius: .2em;
}

input[type="search"].dark {
  background: #222;
  color: #fff;
}

input[type="search"].light {
  background: #fff;
  color: #222;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  border-radius: 50em;
  background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}

input[type="search"]:focus::-webkit-search-cancel-button {
  opacity: .3;
  pointer-events: all;
}

input[type="search"].dark::-webkit-search-cancel-button {
  filter: invert(1);
}

<input type="search" placeholder="search" class="light">
<input type="search" placeholder="search" class="dark">

NB 1. This S.O. question is explicitly about the clear button pseudo element, which is only supported in Webkit-based browsers (Edge, Safari, and Chrome). Currently (2022) Firefox supports the search clear button behind a feature flag only. Until Firefox releases this feature publicly, the only true cross-browser approach that supports Firefox is via a workaround that leverages HTML+CSS with an absolutely positioned <input type="reset"> to clear the entire form when clicked. See stackoverflow.com/a/37846330 Note that this workaround will clear all radio/checkbox selections and other fields if your search form has more than just a single search field.

NB 2. your mileage may vary in Edge, which is also Webkit–based. In my testing (via BrowserStack) some versions of Edge did not support setting a background-image: url() in the ::-webkit-search-cancel-button pseudo-class.

Matthus

I've just run the snippet in Edge and everything seems to work correctly – Norean

Oh, interesting! (And that's great!) I wonder what was messing up my testing then 🤔 – Matthus

Does not work in Safari. :( – Naucratis

@Naucratis it works for me in Safari, but since safari is the new IE, ymmv. Would appreciate it if you could elaborate on how you were testing this. Here is a fiddle that might help isolate the issue for you jsfiddle.net/09gmet7r Note there is evidence that support is buggy in Safari: stackoverflow.com/a/35709128 Screenshots of it working for me: i.imgur.com/r7NzXOi.png i.imgur.com/N0iCYW9.png – Matthus

My bad... it doesn't work in Firefox. – Naucratis

That is correct. This solution works on Webkit-based browsers only (i.e., Edge, Safari, and Chrome). Sorry for what could be construed as a misleading title. The question here is about the clear button pseudo element, which is only supported in those browsers. Firefox doesn't support this feature at all. There is a workaround that leverages HTML+CSS only that could work in all browsers, which you could try... it uses an absolutely positioned <input type="reset"> to clear the entire form when clicked. See stackoverflow.com/a/37846330 – Matthus

nice work. needs to be bit adjusted though, eg drop the .dark .light class and use [data-bs-theme=dark] {} – Janenejanenna

Thanks @luky. [data-bs-theme=dark] sounds bootstrap-specific, but this answer doesn't require bootstrap at all aside from the "x" icon. the example of light/dark support is entirely tangential to the solution, and it was just a quick way to not have to design two versions using the same code. I expect your actual implementation to take what I've started and run with it, be that with bs-theme data attribute, prefers-color-scheme media query, or any other approach. – Matthus

Answer 4

I want to move [the small 'x' icon] a little bit left so it will fix my search bar image.

Users expect things not to move much is UIs. If you decide to move the 'x' icon consider using pseudo-classes and move your search icon instead:

If the search icon is embedded your background image move it into a second image with role="presentation" attribute and place it immediately after your input in the markup:

<input id="search" name="Search" type="search" value="Search" />
<svg role="presentation" class="i-search" viewBox="0 0 32 32" width="14" height="14" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3">
  <circle cx="14" cy="14" r="12" />
  <path d="M23 23 L30 30" />
</svg>

Position it where the user expects:

#search + svg {
  margin-left: -30px;
  margin-bottom: -2px;
}

Then hide and show it using the :placeholder-shown pseudo-classes:

#search + svg {
  visibility: hidden;
}
#search:placeholder-shown + svg {
  visibility: visible;
}

You may style the 'x' icon if you wish. But you might not want to anymore.

Vday

Good solution imo... the browser solution works gimmicky (shown only on hover or focus etc. and not same across browsers) – Outlying

Answer 5

Does a simple "X" with a dark or light backdrop using a single block of CSS rules. Run code snippet to see example.

/* light backdrops only */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 10px;
  background:
    linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#000 45%,#000 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
    linear-gradient(135deg, transparent 0%,transparent 43%,#000 45%,#000 55%,transparent 57%,transparent 100%);
}

/* dark backdrops only */
input[type="search"][value="dark"]::-webkit-search-cancel-button {
  background:
    linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#fff 45%,#fff 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
    linear-gradient(135deg, transparent 0%,transparent 43%,#fff 45%,#fff 55%,transparent 57%,transparent 100%);
}

<input type="search" value="light">
<input type="search" value="dark" style="background:black; color:white;">

Ref: https://mcmap.net/q/175827/-draw-an-x-in-css

Rostov

This is a great solution which works fine for me so far. With 2 small adjustments: 1. The "border: 7px solid inherit;" part seems not needed or is it? Chrome dev tools marks it as invalid when inspecting the "-webkit-search-cancel-button" pseudo element. 2. I added "margin-left: 15px;" as otherwise the input text continues all the way to the X when typing a longer phrase, which is very confusing. – Myotome

Good catch. Edited my code to include those points. – Rostov

Answer 6

Just to highlight better how to figure out such kinds of things by ourselves. As shown and mentioned in @UncaughtTypeError answer above https://mcmap.net/q/174207/-editing-input-type-quot-search-quot-pseudo-element-button-39-x-39

Also in the last section I do go to show how to do different things including changing the color. And with examples.

I loved the answer because it was teaching us how to fish rather than here is the fish

I want to clarify that further for others. Who may didn't notice.

By enabling the show user agent shadow dom in elements section of preferences in devtools.

Now you'll be able to access the shadow dom that is created by the agent (browser engine or browser shortly). In dev tools.

• Get to know how to select the element
• You can manipulate and experiment faster through the dev-tool. And figuring out properties and default values and what doesn't work. (example at the end)

What is shadow dom?

From Mozilla doc Using_shadow_DOM

An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element. This article covers the basics of using the Shadow DOM.

You can learn more about it. On the link above.

How to figure out how you would refer to those hidden elements

After enabling showing the agent shadow dom. Now you can see those hidden dom elements.

Select the element. And check the Styles corresponding selector. As shown by the red box in the illustration above.

input[type="search" i]::-webkit-search-cancel-button {

}

And that's it.

Can test an example below:

https://codepen.io/mohamedlamineallal/pen/JjZmdPv

See before enabling and after enabling the agent dom shadow.

And for demonstration purposes. You can see, I changed the color using filter, resize the button with padding, and repositioned it with margin-right.

Elements around manipulating the clear button

A great deal with this method is that now you can use the Dev-tool to experiment faster. That includes figuring out what doesn't work at a better speed. Example mask-image with background-color. Or pseudo-element .before.

Things we can figure out:

• to position, we have to use margin-right
• resize the clear button with padding
• To show and hide we got to use opacity
• appearance can allow us to hide the default behavior fully. [If we want to disable the default button. We can use appearance: none; (default: appearance: auto;)]
• We can see all the default settings
• To replace the button, use background-image with URL no-repeat and center. Also, set the height and width

... that at a fast glimpse.

• Otherwise, if you want to just change the color, you can with using a filter with (invert, sepia, saturate, hue, brightness, contrast) as in

filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);

(code pen)

You can use the calculator here: 1, 2

You can see the details of that method here (SO answer)

• or also the svg filters method (SO answer) which I guess it's more ideal (why in the SO answer [link]).

filter: url('data:image/svg+xml;utf8,\
  <svg xmlns="http://www.w3.org/2000/svg">\
    <filter id="recolor" color-interpolation-filters="sRGB">\
      <feColorMatrix type="matrix" values="\
        0 0 0 0 R\
        0 0 0 0 G\
        0 0 0 0 B\
        0 0 0 A 0\
      "/>\
    </filter>\
  </svg>\
  #recolor');

read the answer (link).

Reimplement all

And surely if the desired output is more complex. Simply disabling the default behavior and re-implement it fully would be more clean and easy and faster.

Using appearance: none; will hide and disable the default behavior.

input[type="search" i]::-webkit-search-cancel-button {
   appearance: none;
}

You can use position: absolute; on a span element to keep the input behavior as outline on focus (can use padding-right for not letting text overflow below the button) and you can also use CSS URL for background-image (SVG icons, you can have utf8 inline encoded SVG where you can change the color, including dynamically if needed) ... [take keywords, if they make sense check them]

Absolutely: don't use pseudo-element :after. You can't add a js event listener to it. Using a span is cleaner and faster.

Here are some examples:

• Using span with absolute position
• Using :after pseudo-element and using the event-pointer workaround. (event bubbling make it possible) (you can read the comment in the playground)

The :after example demonstrate. Using a flex-box system. Hidding input outline and border. And re-implementing them. Could have used that in the span example. use outline: none; to disable the default outline.

I advise always to use the dom el (span) way.

Carner

Answer 7

#input[type="search"]::-webkit-search-cancel-button {
        // Using the two lines below will allow you to insert a image
        -webkit-appearance: none;
        -webkit-user-modify: read-write !important;
        height: 28px;
        content: url("clear button.png");

Cleotildeclepe

Answer 8

After being in this issue for some time I found this solution using an svg as background.

input[type="search"]::-webkit-search-cancel-button {
    appearance: none;
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    margin: auto;
    background-image: url("assets/close.svg");
    background-size: contain;
}

Stinkstone

Answer 9

I'm not sure is this what you were looking for, but you can style your search bar like this

fiddle

HTML

<div id="input">
<input type="text" id="tb" />
    <a id="close" href="#"><img src="http://www.ecoweb.info/sites/default/files/tips-close.png"></a>
</div>

CSS

#tb
{
    border:none;
}
#input
{
    padding:0px;
    border: 1px solid #999;
    width:150px;
}

#close
{
    float:right;
}

Covalence