当前位置：网站首页>When you click input, the border is not displayed!

When you click input, the border is not displayed!

2022-07-26 09:18:00 【Xiaomeng new admission】

Click on input when , Don't show borders ！

① input{ outline: none; }
②:focus Pseudo class selector

① input{ outline: none; }

Mouse click input when , Highlighted black border , How to remove the problem ？

input{ outline: none; }

You can give borders （border） Set a color , Then outline the border (outline) Get rid of it , When you click, there will be no black border ,outline Set the style of the outline , Style is none when , The outline will not appear , Hopefully that helped ！

②:focus Pseudo class selector

Questions like this are generally used in :focus Pseudo class selector , Use to select the form element to get focus , The focus is also the cursor .
In general input Class form elements :focus Pseudo class selector . Nonsense is not much code , stay input:focus in , Click Remove input The displayed border , as follows ：（ Pictures can be ignored ）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Baidu input box </title>
    <style> input {
       width: 520px; height: 40px; border: none; box-shadow: 0px 1px 2px #888888 inset; background: url(./images/camera_01.png) no-repeat 480px center; } input:focus {
       width: 520px; height: 40px; border: none; outline: none; box-shadow: 0px 0px 3px #005efe inset; background: url(./images/camera_02.png) no-repeat 480px center; } </style>
</head>

<body>

    <input type="text" name="" id="">

</body>

</html>