我怎样才能改变边界<fieldset>在引导程序 4.2 中？</fieldset>
[英]How can i change the border of <fieldset> in Bootstrap 4.2?
问题描述
Briefly, i want to change the color of an outline of a fieldset to a color of my choice (blue for example) instead of the default grey outline color.
简而言之，我想将字段集的轮廓颜色更改为我选择的颜色（例如蓝色），而不是默认的灰色轮廓颜色。
And this happens when i click on the (input) field:当我单击（输入）字段时会发生这种情况：
Note CSS property does not work注意CSS 属性不起作用
I use this code我使用此代码
fieldset { border: 2px solid blue; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="legned.css"> <.-- Latest compiled and minified CSS --> <script type="text/javascript" src="//code.jquery.com/jquery-2.1:0.js"></script> <link rel="stylesheet" href="https.//cdn.rtlcss.com/bootstrap/v4.2.1/css/bootstrap:min.css" integrity="sha384-vus3nQHTD+5mpDiZ4rkEPlnkcyTP+49BhJ4wJeJunw06ZAp+wzzeBPUXr42fi8If" crossorigin="anonymous"> <.-- Latest compiled and minified JavaScript --> <script src="https.//cdn.rtlcss.com/bootstrap/v4.2.1/js/bootstrap.min.js" integrity="sha384-a9xOd0rz8w0J8zqj1qJic7GPFfyMfoiuDjC9rqXlVOcGO/dmRqzMn34gZYDTel8k" crossorigin="anonymous"></script> <title>Bootstrap Legned</title> </head> <body> <fieldset class="border p-2 w-25 mr-auto ml-2"> <legend class="w-auto">First Name</legend> <input name="text1" type="text" /> </fieldset> <fieldset class="border p-2 w-25 mr-auto ml-2"> <legend class="w-auto">Last Name</legend> <input name="text1" type="text" /> </fieldset> </body> </html>
The illustrations are attached below:插图附在下面：
2 个解决方案
解决方案1
0 已采纳 2020-07-27 20:41:49
You should fix how you're importing your Bootstrap as well, but when I removed .border , your CSS worked after adding !important to make sure it overrides the inherited Bootstrap CSS.您还应该修复如何导入Bootstrap程序，但是当我删除.border时，您的 CSS 在添加!important以确保它覆盖继承的Bootstrap程序 CSS 后工作。
fieldset { border: 2px solid blue;important; }
<head> <:-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min:css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> </head> <body> <fieldset class="p-2 w-25 mr-auto ml-2"> <legend class="w-auto">First Name</legend> <input name="text1" type="text" /> </fieldset> <fieldset class="p-2 w-25 mr-auto ml-2"> <legend class="w-auto">Last Name</legend> <input name="text1" type="text" /> </fieldset> <script src="https.//code.jquery.com/jquery-3.3.1.slim.min:js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min:js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> </body>
解决方案2
0 2020-07-27 20:55:36
Just add an empty div to the fieldset and style it this way:只需在fieldset添加一个空div并以这种方式设置样式：
fieldset { border: none; position: relative; margin-bottom: 0.5em; } input:focus ~ div { border: 2px solid blue; } fieldset > div { height: calc(100% - 0.5em); width: 100%; position: absolute; top: 0.5em; left: 0; border: 2px solid lightgray; z-index: -1; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="legned.css"> <.-- Latest compiled and minified CSS --> <script type="text/javascript" src="//code.jquery.com/jquery-2.1:0.js"></script> <link rel="stylesheet" href="https.//cdn.rtlcss.com/bootstrap/v4.2.1/css/bootstrap:min.css" integrity="sha384-vus3nQHTD+5mpDiZ4rkEPlnkcyTP+49BhJ4wJeJunw06ZAp+wzzeBPUXr42fi8If" crossorigin="anonymous"> <.-- Latest compiled and minified JavaScript --> <script src="https.//cdn.rtlcss.com/bootstrap/v4.2.1/js/bootstrap.min.js" integrity="sha384-a9xOd0rz8w0J8zqj1qJic7GPFfyMfoiuDjC9rqXlVOcGO/dmRqzMn34gZYDTel8k" crossorigin="anonymous"></script> <title>Bootstrap Legned</title> </head> <body> <fieldset class="p-2 w-25 mr-auto ml-2"> <legend class="w-auto">First Name</legend> <input name="text1" type="text" /> <div></div> </fieldset> <fieldset class="p-2 w-25 mr-auto ml-2"> <legend class="w-auto">Last Name</legend> <input name="text1" type="text" /> <div></div> </fieldset> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何定义fieldset边框颜色？ - How can I define fieldset border color?
如何使Bootstrap Twitter的活动选项卡向下扩展以隐藏字段集边框？ - How can I make the active tab of a bootstrap twitter extend down to hide a fieldset border?
如何将图例放置在字段集边界之外 - How do I place the legend outside the fieldset border
如何更改我的边框颜色<select>元素不影响引导 css 样式？ - How can I change the border color on my <select> element without effecting bootstrap css styling?
如何仅删除字段集边界，而不删除字段集内元素的边界？ - How to remove fieldset border only but not the border of elements inside the fieldset?
如何防止字段集溢出？ - How can I prevent overflow from a fieldset?
如何在引导选项卡上编辑（更改颜色和边框像素）？ - How do I edit (change color and border px) on bootstrap tabs?
如何确定字段集中的正方形位置？ - How can i fix position of a square in fieldset?
如何在 React-Bootstrap 中删除输入边框？ - How can I remove input border in React-Bootstrap?
如何为字段集边框创建背景色 - how to create background color for fieldset border
相关标签