如何在输入字段上方放置一个加号

Question

The current output of my pgm(the red nd green circle were edited by me for ur understanding) 红色圆圈内的加号应该在绿色圆圈的位置。

你能帮我解决这个问题吗..!! 提前致谢，

我的代码：

 .plussymbol{
     font-size: 40px;
     color: #a4508b;
     background-color:transparent;
     border-radius: 20px;
     border: none;
     display: inline-block;
     cursor: pointer;
     position: absolute;
    /*top: 37%;
     right: 28%;
    */
     padding-top: 15px;
     vertical-align: middle;
}
 .userip{
     width:90%;
     height: 65px;
     border-radius: 30px;
     font-size: 27px;
     font-weight: lighter;
     font-family: 'Hanalei Fill', cursive;
     background-color: #ece7e7;
     color: #000;
     border: none;
     -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.6);
     box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.6);
     padding-right: 20px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
</head>
<body>
    <form>
        <input type="text" class="userip" placeholder="Add Today's Task?" autocomplete="on">
        <button type="button" class="plussymbol">
                 <i class="fas fa-plus-square"></i>
             </button>
    </form>
</body>

</html>

Answer 1

简单的你可以这样做。

 .plussymbol{
    font-size: 40px;
    color: #a4508b;
    background-color:transparent;
    border-radius: 20px;
    border: none;
    display: inline-block;
    cursor: pointer;
    margin-left: -60px;
   }

如何在输入字段上方放置一个加号

How to place a plus symbol over top of a input field

html

css

tags

input

button