html：如何编辑输入类型搜索中的“x”按钮[已关闭]

概述我试图使一个看起来不错的搜索栏.我所做的是,我创建了一个搜索栏的图像,我将图像添加到输入的背景,我正在编辑字体将放置的位置和大小. 唯一无法找到编辑方式的是当我使用输入类型搜索时,小的’x’按钮. 我想把它移动一点,所以它将修复我的搜索栏图像. 这是我的HTML： <input id="search" name="Search" type="search" value="Search" /> 这是 我试图使一个看起来不错的搜索栏.我所做的是,我创建了一个搜索栏的图像,我将图像添加到输入的背景,我正在编辑字体将放置的位置和大小.
唯一无法找到编辑方式的是当我使用输入类型搜索时,小的’x’按钮.
我想把它移动一点,所以它将修复我的搜索栏图像.

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

解决方法 假设您正在谈论“取消搜索”[X]图标,仅适用于Webkit浏览器(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}

哦,并且使用占位符=“搜索”而不是value =“搜索” – 当输入为空时,它将显示单词“search”,并且当用户键入某些东西时将自动删除它.

总结

以上是内存溢出为你收集整理的html：如何编辑输入类型搜索中的“x”按钮[已关闭]全部内容，希望文章能够帮你解决html：如何编辑输入类型搜索中的“x”按钮[已关闭]所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。