我正在寻找得到这个代码:
<form id="first_name"> <div class="form-group"> <label>First name</label> <input type="text" class="form-control input-lg" /> </div> </form>
变成这样
减去颜色,复选框,值等。本质上我希望它看起来就像一个图例标记在一个字段集,但没有任何标签和标签内的文本输入的边界。提前感谢!
cpjpxq1n1#
这是你需要的。你可以根据你的需要改变CSS的值。同样重要的是设置标签的background-color与你的表单/html的颜色相同。
background-color
.form-group{ padding:10px; border:2px solid; margin:10px; } .form-group>label{ position:absolute; top:-1px; left:20px; background-color:white; } .form-group>input{ border:none; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <form id="first_name"> <div class="form-group"> <label>First name</label> <input type="text" class="form-control input-lg" /> </div> </form>
希望这对你有帮助:)。
jw5wzhpr2#
您可以使用图例标记。
<!DOCTYPE html> <html> <body> <form> <fieldset> <legend>Contact</legend> Name <input type="text"><br> Email <input type="text"><br> </fieldset> </form> </body> </html>
rwqw0loc3#
当我看到这里的答案时,都是为了保存时间而回答的,也就是说,当背景图片改变时,做了爆炸的例子,我的例子没有这个问题,你可以随意使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Input</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <style> .textOnInput { position: relative; } .textOnInput label { position: absolute; top: -15px; left: 23px; padding: 2px; z-index: 1; } .textOnInput label:after { content: " "; background-color: #fff; width: 100%; height: 13px; position: absolute; left: 0; bottom: 0; z-index: -1; } label { font-size: 16px; font-weight: 500; display: inline-block; margin-bottom: .5rem; } .form-control { box-shadow: none !important; } </style> </head> <body> <div class="col-md-4 mt-5"> <div class="textOnInput"> <label for="inputText">Email</label> <input class="form-control" type="text"> </div> </div> </body> </html>
ttvkxqim4#
如果你想要一个以上的框,你应该添加相对位置,并添加一些填充:
.form-group{ padding:10px; border:2px solid; margin:10px; } .form-group>label{ padding-left: 5px; padding-right: 5px; position:relative; top:-20px; left:20px; background-color:white; } .form-group>input{ border:none; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <form id="first_name"> <div class="form-group"> <label>First name</label> <input type="text" class="form-control input-lg" /> </div> <div class="form-group"> <label>Second name</label> <input type="text" class="form-control input-lg" /> </div> </form>
tcbh2hod5#
你可以创建一个输入并将其 Package 在一个字段集中:
<fieldset> <legend>text creator</legend> <input type="text" id="text creator" class="form-control" name="object-creator"/> </fieldset>
以及一些基本的CSS来移除输入边界:
input { border:none; width:100%; } input:focus, textarea:focus, select:focus{ outline: none; }
一个二个一个一个
w9apscun6#
<fieldset class="border col-12 pt-0 pb-1 mx-auto "> <legend class="w-auto mb-0">First Name</legend> <input type="text" id="fname" name="fname" class="border-0 p-0 mx-auto pl-1" placeholder="abc@gmail.com"> </fieldset>
如果你正在使用bootstrap 4播放类,并很容易地解决了它,它为我工作,你可以调整你的类,如p-1,ml-2...等
6条答案
按热度按时间cpjpxq1n1#
这是你需要的。你可以根据你的需要改变CSS的值。同样重要的是设置标签的
background-color
与你的表单/html的颜色相同。希望这对你有帮助:)。
jw5wzhpr2#
您可以使用图例标记。
rwqw0loc3#
当我看到这里的答案时,都是为了保存时间而回答的,也就是说,当背景图片改变时,做了爆炸的例子,我的例子没有这个问题,你可以随意使用
ttvkxqim4#
如果你想要一个以上的框,你应该添加相对位置,并添加一些填充:
tcbh2hod5#
你可以创建一个输入并将其 Package 在一个字段集中:
以及一些基本的CSS来移除输入边界:
一个二个一个一个
w9apscun6#
如果你正在使用bootstrap 4播放类,并很容易地解决了它,它为我工作,你可以调整你的类,如p-1,ml-2...等