如何更改引导表单中日期选择器/日历图标的位置？

Question

我使用react-bootstrap ，日历图标或日期选择器会自动设置到表单字段的右侧/末尾。我想将日历图标/日期选择器移动到表单字段的左侧/开头，或者使其立即跟随日期。我试图找到正确的 node_module 来更改日历图标位置的 CSS 代码，但我找不到它。

那么有谁知道我应该在哪里更改 CSS 或者有更好的解决方案吗？

这是表格现在的样子：

Answer 1

HTML5 日期选择器有样式选项吗？

我看到了这个帖子，他们的解决方案/建议对我有用。我的具体解决方案如下：

1. 我用以下代码创建了一个新的css文件--

   input[type="date"]::-webkit-calendar-picker-indicator {
     position: absolute;
     left: 0;
   }
   
   input::-webkit-datetime-edit {
     position: relative;
     left: 15px;
   }
   
   input::-webkit-datetime-edit-fields-wrapper {
     position: relative;
     left: 15px;
   }
   

2. 然后我将其导入到我的表单文件中并且它起作用了。

Answer 2

以下@Cody的答案，它有效，但是输入框的日期值向右浮动，开箱即用，如下所示：

在

left

中对

edit

做了一个小改动，效果非常好：

input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; left: 0; }
input::-webkit-datetime-edit { position: relative; left: 0; }
input::-webkit-datetime-edit-fields-wrapper { position: relative; left: 0; }

以下是此更改后的外观：

Answer 3

我还使用了此处的样式选项： HTML5 日期选择器有样式选项吗？

并发现这是将日历定位到左侧的最简单方法：

input[type="date"] {
   display: flex;
   flex-flow: row-reverse;
   padding: 8px;
   height: auto;
}

Answer 4

感谢 Cody 和 Kurisubo 的回答。我做了这些更改以在日期中添加额外的左侧填充。

input[type="date"] {
    display: flex;
    flex-flow: row-reverse;
    padding: 8px;
    height: auto;
    position: relative;
}


input::-webkit-datetime-edit-fields-wrapper {
    position: relative;
    left: 15px;
}