如何将CSS应用于表单中特定的占位符

Question

我正在处理一个React项目，为了设计我使用了Ant Design框架。我要做的是在表单中有四个输入标签，我需要对第三个输入标签进行一些更改。我想要做的是给第三个输入标签添加margin-left。但是我不知道如何做，请有经验的人告诉我如何解决。

这是我的App.js代码：

import React from "react";
import 'antd/dist/antd.css';
import { Row, Col, Button, Form, Card, Input, DatePicker } from 'antd';
import { SearchOutlined, StopOutlined } from '@ant-design/icons';
import "./App.css";


const App = () => {
  return (
    <div>
      <Row>
<Col className="main" span={18}>
          <div className="customizedCards">
            <Card>
              <Col className="main" span={7}>
                <div className="main-form">
                  <h5 className="idDetails">ID DETAILS</h5>
                  <Form>
                    <Form.Item>
                      <Input className="firstInput common" placeholder="Name" />
                    </Form.Item>
                    <Form.Item>
                      <Input className="secondInput common" placeholder="ID Number" />
                    </Form.Item>
                    <Form.Item>
                      <DatePicker className="date" placeholder="Expiration Date" format="YYYY-MM-DD HH:mm:ss" />
                    </Form.Item>
                    <Form.Item>
                      <Input className="fourthInput common" placeholder="Issue Date" />
                    </Form.Item>
                  </Form>
                </div>
              </Col>
            </Card>
          </div>
        </Col>
      </Row>
 </div>
  )
}

export default App

这是App.css。

.idDetails {
  font-weight: bold;
}

.common {
  padding-top: 5px;
  padding-bottom: 10px;
  border-radius: 4px;
}

.date {
  padding-left: 121px;
  padding-top: 5px;
  padding-bottom: 10px;
  border-radius: 4px;
}


````

- Vamsi

---

请提供一个Codesandbox链接以便更好地帮助您。 - undefined

@Vamsi，所以你需要日期选择器中的文本显示在左边，对吗？ - undefined

@Apostolos 是的，请帮我处理这个。 - undefined

好的，让我看一下。如果我们有一个样本沙盒可以用来工作会更好 :) - undefined

请检查我的答案！ - undefined

Answer 1

如果您需要右对齐，请删除您的date选择器并使用此选择器。

.ant-picker-input > input {
  text-align: right;
}

- Apostolos

Answer 2

如果您希望所有的占位符都具有相同的样式，那么这将更好。

::placeholder {
      color: #fff !important;
      opacity: 1 !important; /* Firefox */
    }
    
    :-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: #fff !important;
      opacity: 1;
    }
    
    ::-ms-input-placeholder {
      /* Microsoft Edge */
      color: #fff !important;
    }

如果您正在使用CRACO，您还可以修改Ant Design中的占位符。

@input-placeholder-color: #fff;

其他方法：在本例中，我使用了 Ant Design 的 Select 组件。您可以通过检查元素来找到要修改的 className。

.ant-select-selection-placeholder {
  color: #fff !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

- snufkin22

Answer 3

.ant-select-selection-placeholder {
  color: red !important;
}

这个对我有用！

- Albert George