Html CSS：在flexbox的第二行插入图标

发布于02月05日

我们的页面上有个问题.我们使用一个插件来 Select 开始日期，但是这个插件不会显示calandar图标来 Select 日期.除了calandar图标向客户显示他可以点击外，其他一切都正常.现在，我们try 在flex box的第二行插入一个图标.

.wscsd_calendar_dates_field::after {
      content: "\f073";
}

但这样一来，它会在flexbox中添加一个新行，并显示图标.但是我们想把它放在第二个，因为用户可以点击那里打开日期 Select 器.

这是我们拥有的HTML struct .

<div class="wscsd_date_picker">
   <label for="wscsd_date_picker_display">Abo Start:</label>
   <div class="wscsd_date_picker">
      <input type="date" class="short wscsd_calendar_dates_field" style="" id="wscsd_start_date" name="wscsd_start_date" min="2022-02-06" value="2022-02-06" placeholder="2022-02-06">
   </div>
</div>

我们怎么能这样做呢？

推荐答案

        .wscsd_calendar_dates_field::after {
          content: "\f073";
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
        }

        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Document</title>
            <link rel="stylesheet" href="style.css" />
            <link
              href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
              rel="stylesheet"
            />
          </head>
          <body>
            <div class="wscsd_date_picker">
              <label for="wscsd_date_picker_display">Abo Start:</label>
              <div class="wscsd_date_picker">
                <input
                  type="date"
                  class="short wscsd_calendar_dates_field"
                  style=""
                  id="wscsd_start_date"
                  name="wscsd_start_date"
                  min="2022-02-06"
                  value="2022-02-06"
                  placeholder="2022-02-06"
                />
              </div>
            </div>
          </body>
        </html>

Html相关问答推荐

Html CSS：在flexbox的第二行插入图标

推荐答案

Html相关问答推荐

为什么在这种情况下是弹性基础：自动不解决内容的大小？

如何让一个动态列表以网格方式水平显示

网格容器中的定心元件

仅在加载视频时显示描述(<；Video>；标签)

如何在将文本垂直居中的同时将文本右对齐？

使用响应迅速的网格系统，将两列保持在同一行，同时允许更多列用于更大的屏幕

如何删除FONT创建的文本下方的空格

悬停表格单元格文本时，使元素的字体大小更大，同时保持表格单元格的高度不变

如何使活动选项卡背景作为父背景图像

如何在 VS Code 中 Select 和删除 HTML 元素(其标签和内容)？

如何实现与内嵌图像对齐的自动换行？

如何只为 Navbar 中的一个元素提供动画，其余元素没有使用 css 的动画

如何在div中设计伪元素？

将背景图像裁剪成两半

我可以在标签元素中使用标题元素吗？

Primeng浮动标签溢出管理

调整大小时 CSS 溢出

如何将我的输入值固定到 2022 年 12 月？

禁用的 Select 标签没有在 chrome 上的 css 中指定的 colored颜色

我正在创建一个 django 审查系统.我认为我的 HTML 是错误的