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

Question

我使用 react-bootstrap <Form.Control type="date"> 并且日历图标或日期选择器自动设置到表单字段的右侧/末尾。我想将日历图标/日期选择器移动到表单字段的左侧/开头，或者它立即跟随日期。我试图找到合适的 node_module 来更改日历图标位置的 CSS 代码，但我找不到它。

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

这是表单现在的样子：

标签： cssdatepickerreact-bootstraphtml5-input-datereact-bootstrap-form

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. 然后我将它导入我的表单文件并且它工作。