How can I remove border from my DatePicker input box?

Issue

I am working on a react component and using datePicker inside it to choose date,When I render my DatePicker component,It shows a Black border outside my text box and I want to remove that border.

Here's my component:

     <div className='col'>
        {translateText('ui.label.message.start.date')}
        <DatePicker
          selected={this.props.startDate}
          placeholder={translateText('Start Date')}
          onChange={date => this.handleStartDateChange(date)}
          dateFormat='DD-MM-YYYY'
          customStyles={{ dateInput: { borderWidth: 0 } }}
        />
      </div>

I have introuduced customStyles to remove that border but its not working. Here's a snapshot of my issue:

Solution

Looks like there is no css applied to your input-filed. You could fix this like:

.react-datepicker-wrapper input[type="text"]{
    border: none;
}

Answered By - rttmax