How to get Rid of Underline on MDBDatePicker

Topic: How to get Rid of Underline on MDBDatePicker

Mike.Thomson free asked 4 years ago

How do I get rid of the underline of the MDBDatePicker I have tried assigning class of 'tp-datepicker' and adding the following CSS This partially gets rid of underline but there is still a narrow trace line (and I cant work out where it is)

 .tp-datepicker {
  background-color: aliceblue !important;
  border: 0 !important;
  resize: none;
  border-radius: 0.25rem !important;
  box-shadow: 0 !important;
  border-bottom: 0px !important;
}

.tp-datepicker :after {
  box-shadow: 0 !important;
  border-bottom: 0px !important;
}

.tp-datepicker ::before {
  box-shadow: 0 !important;
  border-bottom: 0px !important;
}

tp-datepicker ::after {
  box-shadow: 0 !important;
  border-bottom: 0px !important;
}

.tp-datepicker :hover {
  box-shadow: 0 1px 0 blue;
}

Expected behavior

Actual behavior

Resources (screenshots, code snippets etc.)

Add comment

Jakub Chmura staff answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi @Mike.Thomson,

You need to add a CSS code to your stylesheet like this:

div.md-form input[type="text"]:not(.browser-default) {
    border-bottom: none;
}

And overwrite ::after and ::before element also in your stylesheet like this :

[data-test:"date-picker"] div div:after {
content: none;
}

and

[data-test:"date-picker"] div div:before {
content: none;
}

And check if ...: after and ...: before selector works in your case, if not you will need to specify a selector to these elements.

Best, Kuba

Add comment

Mike.Thomson free answered 4 years ago

0 0 Best answer

Yes that works, excepts css should be

[data-test='date-picker'] div div:after {

content: none; }

[data-test='date-picker'] div div:before {
  content: none;
}

Jakub Chmura staff commented 4 years ago

Good to hear that this code works fine for you. Feel free to ask if you need anything.

Best, Kuba

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: 4.25.4
Device: Windows
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

Mike.Thomson

149Support score
11Questions 9Answers 0Snippets