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

Posted 2023-03-21

【中文标题】使用 css 放置带有输入文本的按钮

【英文标题】：Place Button with input text with css

【发布时间】：2022-01-20 04:00:45

【问题描述】：

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

【问题讨论】：

请将您迄今为止尝试过的代码放入您的问题中，并描述哪些代码不能正常工作。见***.com/help/minimal-reproducible-example

【参考方案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"

【讨论】：

帮助 :) tq ..

嗨@kurisu，如果这回答了您的问题，请单击复选图标将其标记为已接受。如果没有，请在您的问题中告诉我们您到底在寻找什么。