hộp nhập html tùy chỉnh về vấn đề tiêu điểm

Tôi đang cố gắng phát triển hộp nhập HTML như hình bên dưới:hộp nhập html tùy chỉnh về vấn đề tiêu điểm

tôi đã làm cho nó bằng cách sử dụng mã sau:

input[type=text] { 
 
    background: transparent; 
 
    border: none; 
 
    border-bottom: 1px solid #000000; 
 
    padding: 2px 5px; 
 
} 
 
input[type=text]:focus 
 
{ 
 
    border: none; 
 
    border-bottom: 1px dashed #D9FFA9; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 

 
    Name : <input type="text" /> 
 
    
 
</body> 
 
</html>

CẤP:
đây khi tôi tập trung vào hộp đầu vào, và bắt đầu nhập văn bản một đường viền màu xanh xuất hiện xung quanh hộp nhập liệu như được hiển thị bên dưới hình ảnh.

Tôi phải xóa hộp viền màu lam này. Làm thế nào để làm nó?

Nguồn

2016-02-20 rusty bit

Bạn đang thực sự bị spam với câu trả lời. Một nửa số người đã xem câu hỏi này đã cố gắng trả lời! ;) –

Thêm outline: 0 để css của bạn

input[type=text] :focus 
{ 
    border: none; 
    border-bottom: 1px dashed #D9FFA9; 
    outline: 0; 
}

tôi sẽ bổ sung thêm rằng điều này là có cho một mục đích và cho thấy một người sử dụng khi đầu vào là tập trung - Đó là thực hành tốt để định dạng (thay đổi màu sắc cho ví dụ), không xóa nó

Nguồn

2016-02-20 06:45:23

Thêm outline: none; vào CSS của bạn, trong input:focus Xin lưu ý rằng input[type=text]: focus phải là input[type=text]:focus.

Xem đoạn cập nhật tại đây:

input[type=text] { 
 
    background: transparent; 
 
    border: none; 
 
    border-bottom: 1px solid #000000; 
 
    padding: 2px 5px; 
 
} 
 
input[type=text]:focus 
 
{ 
 
    border: none; 
 
    border-bottom: 1px dashed #D9FFA9; 
 
    outline: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 

 
    Name : <input type="text" /> 
 
    
 
</body> 
 
</html>

Hope this helps! :)

Nguồn

2016-02-20 06:48:01

Chỉ cần thêm

outline:0;

hoặc

outline:none;

trong css của bạn :)

Nguồn

2016-02-20 06:48:38

Tháo khoảng trắng giữa input[type=text] và :focus

Và thêm outline: none; để input[type=text]:focus

input[type=text] { 
 
    background: transparent; 
 
    border: none; 
 
    border-bottom: 1px solid #000000; 
 
    padding: 2px 5px; 
 
} 
 
input[type=text]:focus 
 
{ 
 
    border: none; 
 
    border-bottom: 1px dashed #D9FFA9; 
 
    outline: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 

 
    Name : <input type="text" /> 
 
    
 
</body> 
 
</html>

Nguồn

2016-02-20 06:48:39 Munawir

Added outline:0 hoặc outline:none trên input[type="text"]:focus trong css của bạn.

input[type="text"]:focus{ 
    outline:none 
}

Nguồn

2016-08-08 10:28:12

hộp nhập html tùy chỉnh về vấn đề tiêu điểm

Trả lời

Các vấn đề liên quan