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

Question

我使用 react-bootstrap <Form.Control type="date"> 并且日历图标或日期选择器自动设置到表单字段的右侧/末尾。我想将日历图标/日期选择器移动到表单字段的左侧/开头，或者它立即跟随日期。我试图找到合适的 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对for做了一个小改动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

我还使用了此处的样式选项： Are there any style options for the HTML5 Date picker?

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

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