Menu
I try to make the border bottom of the text box (input text) disappear.
It's working with border-bottom: none but when I write something the border appear again. I want to make the green line disappear (the image show the page when I'm writing in the input).
Any idea?
337
Answer: Use CSS outline property In Google Chrome browser form controls like <input> , <textarea> and <select> highlighted with blue outline around them on focus. This is the default behavior of chrome, however if you don't like it you can easily remove this by setting their outline property to none .
Use the :focus pseudo-class with the "no-outline" class to style the form fields that are focused by the user. To have clear fields in your forms, set the outline property to its "none" value, which is used to display no outline.
Add the same text-decoration: none !
In materialize.css
textarea:focus {
border-bottom: 1px solid #03a9f4;
-webkit-box-shadow: 0 1px 0 0 #03a9f4;
-moz-box-shadow: 0 1px 0 0 #03a9f4;
box-shadow: 0 1px 0 0 #03a9f4;
}
You can replace the color code with whatever you want to change the underline.
textarea:focus {
border-bottom: 1px solid orange;
-webkit-box-shadow: 0 1px 0 0 orange;
-moz-box-shadow: 0 1px 0 0 orange;
box-shadow: 0 1px 0 0 orange;
}
or remove it :
textarea:focus {
border-bottom: none!important;
box-shadow: none!important;
}
This is code :
This is Result :
186
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
