Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
538 views
in Technique[技术] by (71.8m points)

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

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;
}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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"

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

enter image description here


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...