文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在引导4.2中更改<fieldset>的边框？

问如何在引导4.2中更改<fieldset>的边框？
EN

Stack Overflow用户

提问于 2020-07-27 20:34:10

回答 2查看 1.5K关注 0票数 1

简单地说，我希望将字段集的大纲的颜色更改为我选择的颜色(例如蓝色)，而不是默认的灰色大纲颜色。

当我单击(输入)字段时，就会发生这种情况：

注释 CSS属性不工作

我使用这个代码

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>

插图附后：

在单击输入之前

点击输入后

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-07-27 20:41:49

您也应该修复导入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>

票数 0

Stack Overflow用户

发布于 2020-07-27 20:55:36

只需将一个空div添加到fieldset中，并按以下方式对其进行样式设置：

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63123129

复制

相似问题

问如何在引导4.2中更改<fieldset>的边框？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在引导4.2中更改<fieldset>的边框？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在引导4.2中更改<fieldset>的边框？
EN