css - 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.

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

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