Topic: How to get Rid of Underline on MDBDatePicker
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.)
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
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 premium commented 5 years ago
Good to hear that this code works fine for you. Feel free to ask if you need anything.
Best, Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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