编辑输入类型="搜索"伪元素按钮('x')

我正在尝试制作一个看起来不错的搜索栏.我做的是,我做了一个搜索栏的图像,我将图像添加到输入的背景,我正在编辑字体将出现的位置和大小.我找不到编辑方式的唯一方法是当我使用输入类型搜索时出现的小'x'按钮.我想稍稍向左移动,以便修复我的搜索栏图像.

这是我的HTML:

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

Yuriy Galant.. 45

假设您正在谈论仅在Webkit浏览器中出现的"取消搜索"[X]图标(Chrome,Safari,Opera),您可以使用-webkit-search-cancel-button伪元素.例如:

#Search::-webkit-search-cancel-button{
    position:relative;
    right:20px;    
}

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

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

#Search::-webkit-search-cancel-button{
    position:relative;
    right:20px;  

    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius:10px;
    background: red;
}

而不是[X]将创建一个红色圆圈.

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

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

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

哦,并且确实使用placeholder="Search"而不是value="Search"- 当输入为空时它会显示"搜索"字样 - 当用户输入内容时它会自动删除它.