编辑输入类型=“搜索"伪元素按钮('x') [英] Editing input type="search" Pseudo-element Button ('x')

问题描述

我正在尝试制作一个看起来不错的搜索栏.我所做的是，我制作了一个搜索栏的图像，并将图像添加到输入的背景中，我正在编辑字体将出现的位置和大小.我唯一找不到编辑方法的是使用输入类型搜索时出现的小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.

这是我的 HTML:

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

这是我的 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;
}

推荐答案

对于发现自己在这里(就像我一样)思考如何检查此元素以应用自定义样式?"的任何人；，您需要启用用户代理影子 DOM 以使这些供应商元素可访问.

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.

对于 WebKit (Safari) &闪烁(Chrome、Edge、Opera、Brave)浏览器，请按照以下步骤操作:

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

1. 打开开发者工具 (Ctrl+Shift+I)
2. 找到右上角的齿轮图标，然后单击以打开下拉菜单
3. 在打开的上下文菜单中，在首选项"下，找到元素"；朝底部并启用显示用户代理影子 DOM"

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"

如你所见，我是一个有文化的人，如果有黑暗主题，我就用它

这篇关于编辑输入类型=“搜索"伪元素按钮('x')的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！