Many programmers will encounter the problem of removing the input border style when writing projects. Today we will study it. Is there any way to solve this problem?
Generally, we will set the input:
input{
border: none;
}In this method, we remove the display style, but when typing, we need to click on the input box and find that there is still a black initialization border:
How to deal with this situation?
We can achieve this through the focus selector
Remove the style of the text input box:
input[type=text]:focus {
outline: none;
}Remove the style of the password input box:
input[type=password]:focus {
outline: none;
}In short, whichever type of type=input is used, the style will be removed.
The final effect is as follows:
The following are the different values of common input boxes.
text The default input type.
password Password input box, expressed as a series of dots.
file file upload control
radio radio button
checkbox checkbox
hidden Hidden input field, used to add a form that is not visible to the user
button button
image Submit button in image form
reset reset button to clear all data in the form
submit submit button, the submit button will send the form data to the server
color palette
tel Input field containing phone number
email Input field containing email address
url input field containing the URL address
search search domain
number An input field containing a numerical value
range An input field containing numeric values within a certain range
date selects the input field of day, month and year
month selects the input field for month and year
week selects the input field of week and year
time input field to select month and year
datetime selects the input field of time, day, month, and year (UTC time)
datetime-local selects the input field of time, day, month, and year (local time)
At this point, the problems we encountered have been solved, but to learn this kind of thing, we need to draw inferences from one instance, and we need to be good at summarizing and digging deeper. What do you think?
