html Bootstrap 突出显示表单中的空输入/字段

bq8i3lrv 于 2023-03-11 发布在 Bootstrap

关注(0)|答案(1)|浏览(191)

我有一个“更新个人资料”的形式。我想突出空输入这是不需要的，但“很高兴有”的用户填写。
如果输入字段为空，是否可以突出显示它们（类似于下面的活动字段的某种发光或其他突出显示方法）？
请参见此处的示例：

.form-control:focus {
   border-color: #FF0000;
   
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">

    <!-- Example Code -->
    
    <div class="input-group mb-3" bis_skin_checked="1">
      <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
      <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
    </div>
    
    
    <!-- End Example Code -->
  </body>
</html>

Html

来源：https://stackoverflow.com/questions/75643413/bootstrap-highlight-empty-input-field-in-form

1条答案

按热度按时间

prdp8dxp1#

可以将这些输入设为required。

input:not(:valid) {
    background-color: yellow;
}

First Name <input type="text" required><br>
Last Name <input type="text" required>

您可以使用Javascript来完成此操作，然后您就不需要将它们设置为必填项：
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

赞(0）回复(0）举报 2023-03-11

我来回答

html Bootstrap 突出显示表单中的空输入/字段

1条答案

相关问题

热门标签

最新问答