如何将 css 应用于表单中的特定占位符
How to apply css to a specific placeholder in a form
我正在做一个 React 项目,为了设计我正在使用 Ant 设计框架。我想做的是我有四个输入标签的形式,我需要为第三个输入标签添加一些更改,我想做的是我试图给第三个输入标签留出边距。但是我不知道该怎么做所以有人帮我解决这个问题。
这是我的代码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;
}
````
如果您希望所有占位符的样式都相同,这会更好。
::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中修改placeholder
@input-placeholder-color: #fff;
一些其他方式:对于这个例子,我使用的是 ant design Select。您可以通过检查元素找到要修改的类名。
.ant-select-selection-placeholder {
color: #fff !important;
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
}
只需删除您的 .date
选择器,如果您需要右对齐,请使用此选择器
.ant-picker-input > input {
text-align: right;
}
我正在做一个 React 项目,为了设计我正在使用 Ant 设计框架。我想做的是我有四个输入标签的形式,我需要为第三个输入标签添加一些更改,我想做的是我试图给第三个输入标签留出边距。但是我不知道该怎么做所以有人帮我解决这个问题。
这是我的代码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;
}
````
如果您希望所有占位符的样式都相同,这会更好。
::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中修改placeholder
@input-placeholder-color: #fff;
一些其他方式:对于这个例子,我使用的是 ant design Select。您可以通过检查元素找到要修改的类名。
.ant-select-selection-placeholder {
color: #fff !important;
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
}
只需删除您的 .date
选择器,如果您需要右对齐,请使用此选择器
.ant-picker-input > input {
text-align: right;
}