Topic: Input group not showing borders
einar pro asked 6 years ago
I am trying to add a textbox (input) with borders.When I use this code below which I have copied from the MDB web and should be a textbox with borders(see this page: https://mdbootstrap.com/components/bootstrap-input-group/) I only get a textbox (input)with underline which turns blue when clicked on.Does anyone have a clue?<div class="input-group md-form form-sm form-5 pl-0"> <input type="text" class="form-control mt-0 purple-border" placeholder="Recipient's username" aria-describedby="basic-addon12"> <span class="input-group-addon purple lighten-3 black-text" id="basic-addon12">@example.com</span></div>
Marta Wierzbicka staff answered 6 years ago
einar pro commented 6 years ago
I had already seen this. This is where I got the code I was using. I got it now so thanks for the help :)Marta Wierzbicka staff commented 6 years ago
You're welcome.Marta Wierzbicka staff answered 6 years ago
<div class="input-group md-form form-sm form-3 pl-0">
<span class="input-group-addon amber lighten-3 black-text" id="basic-addon9">@</span>
<input type="text" class="form-control mt-0 amber-border" placeholder="Username" aria-describedby="basic-addon9">
</div>
CSS:
.input-group.md-form.form-sm.form-3 input {
border: 1px solid #bdbdbd;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
.input-group.md-form.form-sm.form-3 input[type=text]:focus:not([readonly]).amber-border {
border: 1px solid #ffca28;
box-shadow: none;
}
Best,
Marta
einar pro commented 6 years ago
So it is not a part of MDB bootstrap? Do I have to add it to my custom style css file?einar pro commented 6 years ago
I have tried it out and it is as expected now. But it would have saved some time for a beginner to mention that this was not a part of the standard mdb bootstrap css. Anyway - thanks.FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No