jQuery UI - loại bỏ biên giới tab màu cam trên tập trung

Question

Tôi cố gắng để loại bỏ biên giới này:

và vì nó chỉ hiển thị trên tập trung Tôi không thể tìm thấy trong đó lớp để ghi đè lên bằng cách sử dụng chrome console .

Có ai đã làm điều này và biết lớp tôi nên ghi đè là gì không?

Chỉnh sửa: Tôi cho rằng đây là hành vi tiêu chuẩn và here bạn có thể xem ví dụ. Tôi cũng đang sử dụng Chrome.

Answer 1

li a 
{ 
    outline-color: transparent; 
}​ 

Answer 2

Bạn có thể ghi đè các lớp họcvà ui-state-active css.

.ui-state-focus { 
    border: none; 
    outline: none; 
} 

.ui-state-active { 
    border: none; 
    outline: none; 
} 

Trong trường hợp của jQuery UI Tabs trọng ui-state-active nên là đủ.

Cập nhật: Trong trường hợp của bạn, đây không phải là lớp ui-state-active mà là đường viền neo thường xuyên trong webkit. Tôi đã cập nhật fiddle của bạn: http://jsfiddle.net/ukPW6/4/

Answer 3

NHANH GIẢI PHÁP:

Các giải pháp nếu bạn muốn làm ảnh hưởng đến yếu tố .ui thực tế.

.ui-state-active a, .ui-state-hover a { 
    outline: none; 
} 

gì khác biệt là giữa Anon và Konstantin D's câu trả lời?

Anon đã nhắm mục tiêu đúng "thẻ thực" bên trong "thẻ li". Luôn nhớ rằng các tab đó(); sử dụng "một thẻ" bên trong danh sách chưa được phân loại. Để thực sự hiển thị điều hướng tab.

VÍ DỤ:

CSS quá ảnh hưởng đến phác thảo trên li: một thẻ

.ui-state-active a, .ui-state-hover a { 
    outline: none; 
} 

cháy jQuery UI Tabs Widget

$('#my-tabs').tabs(); 

Tabs Markup trong HTML

<div id="my-tabs"> 
    <ul> 
     <li><a href="#tab-1">Tab 1</a></li> 
     <li><a href="#tab-2">Tab 1</a></li> 
    </ul> 
    <div id="tab-1"></div> 
    <div id="tab-2"></div> 
</div> 

Answer 4

Tôi thích giải pháp Daniel, tôi chỉ muốn thêm video này vào nó:

.ui-state-active a, .ui-state-hover a, .ui-state-visited a, .ui-state-focus a { 
    outline: none; 
} 

các .ui-state-visited a & .ui-state-focus a dừng nó cho thấy phác thảo khi bạn nhấp vào tab khác nhau/chuột của bạn rời khỏi khu vực di chuột

Answer 5

câu trả lời của tôi là sự pha trộn của tất cả các câu trả lời ở trên sử dụng đơn giản và ngắn sau

.ui-tabs .ui-tabs-nav li a { 
    outline:none; 
} 

Answer 6

chấp nhận câu trả lời hoạt động trong Firefox nhưng tôi gặp sự cố với Chrome trong máy Mac.
thuộc tính kiểu đường viền dường như giải quyết vấn đề này cho tôi.

.ui-state-focus { 
     outline-style:none; 
    } 

Answer 7

Nếu các giải pháp trên vẫn không hoạt động thì nguyên nhân là do thuộc tính box-shadow. Hãy thử điều này:

.ui-state-focus:focus, .ui-state-focus, li a { 
    box-shadow:none; 
} 

Answer 8

Tôi đang gặp phải vấn đề tương tự. Điện thoại di động jQuery áp dụng các lớp khi chạy, tôi đã thử các giải pháp trên nhưng nó không hoạt động cho tôi thì tôi đã xóa ui-shadow biểu mẫu lớp <div data-role="navbar" class="ui-corner-all"> Điều đó đáp ứng yêu cầu của tôi.