我试图使一个看起来不错的搜索栏.我所做的是,我创建了一个搜索栏的图像,我将图像添加到输入的背景,我正在编辑字体将放置的位置和大小.
唯一无法找到编辑方式的是当我使用输入类型搜索时,小的’x’按钮.
我想把它移动一点,所以它将修复我的搜索栏图像.
唯一无法找到编辑方式的是当我使用输入类型搜索时,小的’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”,并且当用户键入某些东西时将自动删除它.
