以可视方式加入CSS中的按钮和文本字段 [英] Visually joining a button and text field in CSS

问题描述

在我正在构建的一个网络论坛中（用Django / Python），一个功能是用户可以写一个快速的单行回复（推文长度），然后提交给所有参与者看。目前，我已经制定了简单的表单：

我应该在我的HTML / CSS中做出什么样的改变来代替呈现我的表单，如下所示：

stack.imgur.com/MklfZ.pngrel =nofollow noreferrer>

我正在寻找一个完全响应的解决方案，它在所有浏览器中都是健壮的，并且内置纯CSS。

---

我现在的代码如下：

 < form method =post action ={％url'home_reply'pk = link.l％}> 
 {％csrf_token％} 
 {{replyform.description}}< br> 
< button type =submit>提交< / button> 
< / form> 
  

忽略 {{}} 语法 - 这是Django的模板语言。

解决方案

我创建类似的技术是将两个容器都包装在一起

 < div class =fancy-box-with-button> 
< input type =text/> 
<按钮>提交< /按钮> 
< / div> 
  

然后移动所有的< input> 样式转换为 .fancy-box-with-button 然后根据您的需要制作< input> 透明和其他修改。
$ b

使按钮位置：绝对并且位置正确，添加必要的 padding-right 到父元素，以防止看不见的输入重叠。

最有可能是这样。

  .fancy-box-with-button {
 background-color：white; 
 border-radius：4px; 
 margin：10px; 
 display：block; 
职位：亲属; 
 height：30px; 
 box-sizing：border-box; 
 padding-right：100px; 
} 
 
。带有按钮的输入框{
 height：100％; 
宽度：100％; 
 border：none; 
保证金：0; 
 background-color：transparent; 
} 
 
。带框的按钮按钮{
 position：absolute; 
 top：0; 
 right：0; 
保证金：0; 
身高：100％; 
 width：100px; 
 border：none; 
颜色：白色; 
 background-color：blue; 
} 
  

工作示例

In a web forum I'm building (in Django/Python), one feature is that users can write a quick single line reply (tweet length) and then submit it for all participants to see. Currently, this is how I've laid out the simple form:

What changes should I make in my HTML/CSS to instead render my form as follows:

I'm looking for a fully responsive solution that's robust across all browsers, built in pure CSS.

---

My current code is as follows:

<form method="post" action="{% url 'home_reply' pk=link.l %}">
    {% csrf_token %}
    {{ replyform.description }}<br>
    <button type="submit">Submit</button>
</form>

Ignore the {{}} syntax - that's Django's template language.

解决方案

My technique to create something like that is to wrap both with a container

<div class="fancy-box-with-button">
  <input type="text"/>
  <button>Submit</button>
</div>

then move all your <input> styles to .fancy-box-with-button then make <input> transparent and other modifications as you see fit.

Make the button position: absolute and positioned right, add necessary padding-right to the parent element to prevent invisible input from being overlapped.

Most likely would look like this.

.fancy-box-with-button {
  background-color: white;
  border-radius: 4px;
  margin: 10px;
  display: block;
  position: relative;
  height: 30px;
  box-sizing: border-box;
  padding-right: 100px;
}

.fancy-box-with-button input {
  height: 100%;
  width: 100%;
  border: none;
  margin: 0;
  background-color: transparent;
}

.fancy-box-with-button button {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  height: 100%;
  width: 100px;
  border: none;
  color: white;
  background-color: blue;
}

working example

这篇关于以可视方式加入CSS中的按钮和文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！