Hướng dẫn css focus input border - đường viền đầu vào lấy nét css

Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn. Cảm ơn bạn!ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Vui lòng sử dụng cú pháp sau để loại bỏ đường viền của hộp văn bản và xóa đường viền được tô sáng của kiểu trình duyệt.

11.3K14 Huy hiệu vàng61 Huy hiệu bạc91 Huy hiệu Đồng trong css khác với :focus. :focus đại diện cho một element chẳng hạn như phần tử

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

8 được

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

9 vào. Ví dụ nó sẽ được kích hoạt khi người dùng click vào một phần tử hoặc sử dụng phím Tab của bàn phím.

Đã trả lời ngày 8 tháng 5 năm 2013 lúc 8:55

Tabishtabish

1.48416 huy hiệu bạc13 huy hiệu đồng

Bộ

<div class="container">
  <div class="form">
    <label for="email">Your emaillabel>
    <input type="email" id="email" />
  div>
  <div class="form">
    <label for="password">Your Passwordlabel>
    <input type="password" id="password" />
  div>
div>

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

"! Quan trọng" chỉ là trong trường hợp. Nó không cần thiết. [Và bây giờ nó đã biến mất. Cấm.]

Đã trả lời ngày 5 tháng 9 năm 2013 lúc 15:28

Maddmadd

.container:focus-within {
    padding: 40px;
}

3292 Huy hiệu bạc8 Huy hiệu Đồng

Tôi phát hiện ra rằng bạn cũng có thể sử dụng:

Bgilham

johannchopin

12.5k9 gold badges46 silver badges93 bronze badges9 gold badges46 silver badges93 bronze badges

asked Aug 3, 2010 at 13:49Aug 3, 2010 at 13:49

Joey MoraniJoey MoraniJoey Morani

24.1k32 gold badges81 silver badges130 bronze badges32 gold badges81 silver badges130 bronze badges

5

This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it with outline property, though:

textarea:focus, input:focus{
    outline: none;
}

You may want to add some other way for users to know what element has keyboard focus though for usability.

Chrome will also apply highlighting to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:

*:focus {
    outline: none;
}

---

⚠️ Accessibility warning

Please notice that removing outline from input is an accessibility bad practice. Users using screen readers will not be able to see where their pointer is focused at. More info at a11yproject

answered Aug 3, 2010 at 13:52Aug 3, 2010 at 13:52

9

The current answer didn't work for me with Bootstrap 3.1.1. Here's what I had to override:

.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}

johannchopin

12.5k9 gold badges46 silver badges93 bronze badges9 gold badges46 silver badges93 bronze badges

asked Aug 3, 2010 at 13:49Feb 21, 2014 at 3:43

Joey MoraniJoey Moranigwintrob

24.1k32 gold badges81 silver badges130 bronze badges1 gold badge17 silver badges14 bronze badges

8

input:focus {
    outline:none;
}

This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it with outline property, though:

johannchopin

12.5k9 gold badges46 silver badges93 bronze badges9 gold badges46 silver badges93 bronze badges

answered Aug 3, 2010 at 13:52Aug 3, 2010 at 13:52

azram19azram19azram19

The current answer didn't work for me with Bootstrap 3.1.1. Here's what I had to override:1 gold badge9 silver badges6 bronze badges

4

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

0

johannchopin

answered Feb 21, 2014 at 3:43Oct 8, 2014 at 7:26

gwintrobgwintrobKailas

3,0451 gold badge17 silver badges14 bronze badges3 gold badges45 silver badges63 bronze badges

6

This will do. Orange outline won't show up anymore.
I used:

.container:focus-within {
    padding: 40px;
}

8 in the CSS and it seems to have worked. Thanks for the help anyway. :)

1,7071 gold badge9 silver badges6 bronze badgesAug 3, 2010 at 13:51

Joey MoraniJoey MoraniJoey Morani

24.1k32 gold badges81 silver badges130 bronze badges32 gold badges81 silver badges130 bronze badges

2

This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it with outline property, though:

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

1

johannchopin

12.5k9 gold badges46 silver badges93 bronze badges9 gold badges46 silver badges93 bronze badges

asked Aug 3, 2010 at 13:49Oct 10, 2012 at 20:43

Joey MoraniJoey Moraninonamehere

24.1k32 gold badges81 silver badges130 bronze badges3 silver badges2 bronze badges

This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it with outline property, though:

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

2

You may want to add some other way for users to know what element has keyboard focus though for usability.

johannchopin

12.5k9 gold badges46 silver badges93 bronze badges9 gold badges46 silver badges93 bronze badges

asked Aug 3, 2010 at 13:49May 23, 2013 at 9:55

2

Joey MoraniJoey Morani

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

3

daniel__

24.1k32 gold badges81 silver badges130 bronze badges14 gold badges61 silver badges91 bronze badges

This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it with outline property, though:May 8, 2013 at 8:55

You may want to add some other way for users to know what element has keyboard focus though for usability.Tabish

Chrome will also apply highlighting to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:16 silver badges13 bronze badges

1

⚠️ Accessibility warning

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

4

Please notice that removing outline from input is an accessibility bad practice. Users using screen readers will not be able to see where their pointer is focused at. More info at a11yproject

answered Aug 3, 2010 at 13:52Sep 5, 2013 at 15:28

The current answer didn't work for me with Bootstrap 3.1.1. Here's what I had to override:madd

johannchopin 2 silver badges8 bronze badges

2

answered Feb 21, 2014 at 3:43

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

5

gwintrobgwintrob

3,0451 gold badge17 silver badges14 bronze badges1 gold badge23 silver badges39 bronze badges

This will do. Orange outline won't show up anymore.May 6, 2015 at 12:51

1,7071 gold badge9 silver badges6 bronze badgesRefilon

Worked well for me. Wished to have it fixed in html itself ... :)1 gold badge25 silver badges46 bronze badges

1

Điều này chắc chắn sẽ hoạt động.Đường viền màu cam sẽ không hiển thị nữa .. phổ biến cho tất cả các thẻ:

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

1

Cụ thể cho một số thẻ, ví dụ: thẻ đầu vào

.form {
    padding-left: 10px;
    border-left: 3px solid rgb(224, 224, 224);
}
.form:focus-within {
    border-color: rgb(56, 142, 255);
}

7

hichris123

9,99515 Huy hiệu vàng55 Huy hiệu bạc68 Huy hiệu Đồng15 gold badges55 silver badges68 bronze badges

Đã trả lời ngày 19 tháng 4 năm 2013 lúc 6:51Apr 19, 2013 at 6:51