Người dùng chọn: tất cả thừa kế không hoạt động trong chrome 62

Question

Tôi vừa nâng cấp Google Chrome trên PC và Mac lên phiên bản 62 và thuộc tính CSS user-select: all đã ngừng hoạt động, chính xác.

Nếu bạn có cha mẹ với số user-select được đặt thành không có gì và trẻ có số user-select được đặt thành tất cả, thuộc tính gốc không được ghi đè chính xác.

-webkit-user-select: all; 
-moz-user-select: all; 
-ms-user-select: all; 
user-select: all; 

Có ai khác biết điều này và biết đây có phải là lỗi trong phiên bản mới của Google Chrome hoặc nếu có cách chính xác để thực hiện việc này?

Đây là mã chứng minh vấn đề này (sử dụng Chrome 62 để xem vấn đề) - JSFiddle:

div { 
 
    margin: 5px; 
 
} 
 
.parent { 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 
.child { 
 
    -webkit-user-select: text; 
 
    -moz-user-select: text; 
 
    -ms-user-select: text; 
 
    user-select: text; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    Parent has user-select set to none, Try to select this text 
 
    </div> 
 
</div> 
 

 
<div class="child"> 
 
    No parent, Try to select this text 
 
</div>

Answer 1

Đây là sự cố trên trình duyệt Chrome. Lỗi đã được báo cáo. Bạn có thể tìm thêm chi tiết về lỗi này với lỗi khác (ví dụ không làm việc) trên this bug report.

---

Cho đến khi lỗi được khắc phục, bạn có khả năng sử dụng một số JavaScript để nhận hành vi. Xem this answer on StackOverflow.

---

Một giải pháp phi JavaScript sẽ là như sau:

.parent :not(.selectable-all) { 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 
.selectable-all { 
 
    -webkit-user-select: all; 
 
    -moz-user-select: all; 
 
    -ms-user-select: all; 
 
    user-select: all; 
 
}

<div class="parent"> 
 
    <span>user-select set to none and not selectable all.</span> 
 
    <div class="child selectable-all"> 
 
    Parent has user-select set to none, Try to select this text 
 
    </div> 
 
</div> 
 

 
<div class="child selectable-all"> 
 
    No parent, Try to select this text 
 
</div>

Answer 2

Hãy thử thay đổi user-select:all-user-select:text

CSS:

div { 
    margin: 5px; 
} 

.parent { 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

.child { 
    -webkit-user-select: text; 
    -moz-user-select: text; 
    -ms-user-select: text; 
    user-select: text; 
} 

Bản trình diễn: https://jsfiddle.net/lotusgodkk/12jfpzys/2/