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

发布时间：2020-12-14 19:35:02 所属栏目：资源来源：网络整理

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!