Editing input type=“search” Pseudo-element Button

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.

Here is my HTML:

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

Here is my CSS:

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

Answer 1

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

Answer 2

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 3x vertical dots, top-right and click to open up the dropdown menu
3. Click "Settings" from this dropdown menu (2nd to last option in the list)
4. 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

Answer 3

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.

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.