How to apply css to a specific placeholder in a form

Question

I am working on a React project and for designing I am using Ant design framework. What I trying to do is I have form in that I have four Input tags, I need to add some changes for third Input tag, What I want to do is for third Input tag I am trying to give margin-left. But I don't know how to do it so someone help me how to resolve this.

This is my code 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

This is 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;
}


````

by adding font-family to the input box you can add style to placeholder. But it will be as same as the input font. — Uttam, Jun 29 '21 at 05:53
Simple way `.YOUR-ELEMENT-CLASS::placeholder { opacity: 1; }` — Zaid Bin Khalid, Jun 29 '21 at 06:05
Hi @Apostolos https://codesandbox.io/s/nostalgic-agnesi-43dkm — Vamsi, Jun 29 '21 at 06:09
@Vamsi so you need text in datepicker to show at left correct? — Apostolos, Jun 29 '21 at 06:13
ok let me have a look. it's better when we have a sample sandbox to work with :) — Apostolos, Jun 29 '21 at 06:15

score 2 · Accepted Answer · answered Jun 29 '21 at 06:25

2

just delete your .date selector and use this selector if you need right align

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

answered Jun 29 '21 at 06:25

Apostolos

10,033
5
24
39

score 1 · Answer 2 · answered Jun 29 '21 at 05:54

This will be better if you want all of your placeholder same style.

::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;
    }

You can also modify the placeholder in ant design if you are using CRACO.

@input-placeholder-color: #fff;

some other ways: For this example I am using ant design Select. You can find the className to modify by inspecting the element.

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

score 0 · Answer 3 · answered Jun 24 '23 at 12:39

0

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

This one works for me!

answered Jun 24 '23 at 12:39

Albert George

321
1
3
7

How to apply css to a specific placeholder in a form

3 Answers3