我如何使用按钮和双按钮来创建输入框？

Question

Hello guys，我是Web开发的初学者，但是我不了解框架和库...于是，我决定从Electron应用程序开始，但我想做一些不常见的按钮和输入。我有一个应用程序的截图（在Adobe XD中完成）。我将对屏幕快照中要执行的两个控件进行四舍五入。一个是带有退格键和擦除按钮以及圆角的输入框，第二个是带有圆角的双键...

我不知道该怎么办...

谢谢您的帮助！！这对我来说非常有用：D

Answer 1

有几种方法，但是因为您说您只是在进行Web开发，所以我将向您展示使用Boostrap 4

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="button-addon2"><i class="fa fa-arrow-left"></i> </button>
    <button class="btn btn-outline-secondary" type="button" id="button-addon2"><i class="fa fa-trash"></i></button>
  </div>
</div>

在此处查看更多https://getbootstrap.com/docs/4.3/components/input-group/