时间戳

首页 > 解决方案 > 我怎样才能改变边界

在引导程序 4.2 中？

html - 我怎样才能改变边界
在引导程序 4.2 中？

问题描述

简而言之，我想将字段集的轮廓颜色更改为我选择的颜色（例如蓝色），而不是默认的灰色轮廓颜色。

当我单击（输入）字段时会发生这种情况：

注意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>

插图附在下面：

在点击输入之前

点击输入后

标签： htmlcss

解决方案

你也应该修复你如何导入你Bootstrap的，但是当我删除时.border，你的 CSS 在添加后工作，!important以确保它覆盖继承的BootstrapCSS。

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>

推荐阅读