创建动画搜索图标

Question

我正在尝试在vue中创建一个搜索栏。现在搜索栏从左侧打开，但我希望它从右侧打开。除了背景图片，我还想使用一个字体很棒的图标。如何实现这两个目标？

<template>
  <span id="demo-2">
    <input type="search" placeholder="Search">
</span>
</template>

<style scoped>
input {
    outline: none;
}
input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    font-family: inherit;
    font-size: 100%;
}



input[type=search] {
    background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
    border: solid 1px #ccc;
    padding: 9px 10px 9px 32px;
    width: 55px;
    
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
    
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

#demo-2 input[type=search] {
    width: 15px;
    padding-left: 10px;
    color: transparent;
    cursor: pointer;
}
#demo-2 input[type=search]:hover {
    background-color: #fff;
}
#demo-2 input[type=search]:focus {
    width: 130px;
    padding-left: 32px;
    color: #000;
    background-color: #fff;
    cursor: auto;
}
#demo-2 input:-moz-placeholder {
    color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
    color: transparent;
}
</style>

Answer 1

我不知道动画的答案，但如果你想添加字体，可怕的图标，你可以添加它的链接到vuejs的主模板文件。只需将链接复制粘贴到标题部分，然后在vue代码中使用<i>search icon</i>即可。

Answer 2

用一个很棒的字体图标替换背景

您可以在CSS中使用:after或:before属性：

• https://developer.mozilla.org/en/docs/Web/CSS/::before

它将允许你显示内容，链接到你的输入(比如一个很棒的字形图标)：

input {
   position: relative;
}
input:after {
   content: '\f002';
   position: absolute;
   right: 10px;
   top: 5px;
}

在本例中，字体很棒的图标是：\f002：

• https://fontawesome.com/icons/search?style=solid

从右侧开始设置动画

如果你使用:after属性并且位置对你的输入是绝对的(使用right CSS属性)，它应该从右边打开。