沃梦达 / 编程问答 / 前端问题 / 正文

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

沃梦达教程前端问题

2022-01-01

Place Button with input text with css(使用CSS放置带有输入文本的按钮)

本文介绍了使用CSS放置带有输入文本的按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何使用CSS创建这样的输入文本和按钮？或证明js

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放置带有输入文本的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：使用CSS放置带有输入文本的按钮

上一篇：如何在VUE中同时使用v-model和v-model.trim

下一篇：即使每次插入第一个输入的值不同，第二个输入仍显示相同的输入值