编辑输入类型＝“搜索".伪元素按钮('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;
}

推荐答案

在Webkit浏览器中设置"x"取消搜索按钮的样式

假设您正在谈论仅在Webkit浏览器(Chrome，Safari，Opera)中出现的取消搜索" [X]图标，则可以使用

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

演示: http://jsfiddle.net/5XKrc/1/

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

屏幕截图:

使用这种方法，您甚至可以创建自己的取消按钮，例如以下样式:

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

代替[X]会创建一个红色圆圈.

Instead of [X] will create a red circle.

演示 http://jsfiddle.net/5XKrc/3/

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

屏幕截图:

对于IE10及更高版本，您可以使用以下按钮移动按钮:

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

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

哦，请使用placeholder="Search"而不是value="Search"-输入为空时，它将显示单词"search"-并在用户键入内容时自动将其删除.

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.

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