使用 css 放置带有输入文本的按钮

Question

如何使用 CSS 制作这样的输入文本和按钮？或 vuetify js

Answer 1

这是您要找的CSS。

.parent-box{
  width:fit-content;
  background:#26376B;
}
.text-box{
  border:1px solid #CACACA;
  padding:5px 10px;
  min-width:300px;
}
.btn{
  padding:5px 20px;
  width:100px;
  color:#fff;
  border:none;
  background-color:#26376B;
  cursor:pointer;
}
.common{
  outline:none;
  border-radius:50px;
}

<div class="parent-box common">
  <input class="text-box common" type="text" placeholder="Chassis Number">
  <button class="btn common">Check</button>
</div>

如果你只想输入数字那么在<input type="text">

中使用type="number"

使用 css 放置带有输入文本的按钮

Place Button with input text with css

css

bootstrap-4

vuetify.js