xóa bóng bên trong của kiểu nhập văn bản

Question

Vì vậy, tôi có kiểu nhập văn bản, sử dụng html5, trên chrome và tôi muốn thay đổi giao diện nhập văn bản, tôi đã xóa đường viền trên tiêu điểm (cam trên chrome), tôi thiết lập nền cho một màu sáng #f1f1f1 nhưng bây giờ có giống như một biên giới dày hơn ở phía trên và bên trái, giống như nó có nghĩa là để nhìn đẩy vào, khi không có sự thay đổi trong màu nền điều này không xảy ra. Làm thế nào để loại bỏ nó? Rất tiếc, tôi không thể cung cấp ảnh, trên thiết bị di động.

Điều này xảy ra trên chrome, tức là và Firefox, không thể kiểm tra bất kỳ thứ gì khác.

Answer 1

border-style:solid; sẽ ghi đè kiểu inset. Đó là những gì bạn hỏi.

border:none sẽ xóa toàn bộ đường viền.

border-width:1px sẽ thiết lập nó giống như trước khi thay đổi nền.

border:1px solid #cccccc cụ thể hơn và áp dụng cả ba, chiều rộng, kiểu và màu sắc.

Ví dụ: https://jsbin.com/quleh/2/edit?html,output

Answer 2

Thêm border: none hoặc border: 0 để xóa đường viền hoặc border: 1px solid #ccc để làm đường viền mỏng và bằng phẳng.

Để loại bỏ ma đệm trong Firefox, bạn có thể sử dụng ::-moz-focus-inner:

::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
} 

Xem live demo.

Answer 3

Đặt border: 1px solid black để làm cho tất cả các cạnh bằng và loại bỏ bất kỳ loại đường viền tùy chỉnh nào (trừ rắn). Ngoài ra, hãy đặt box-shadow: none để xóa mọi bóng nội bộ được áp dụng cho nó.

Answer 4

Đây là giải pháp cho safari di động:

-webkit-xuất hiện: none;

như được đề xuất tại đây: Remove textarea inner shadow on Mobile Safari (iPhone)

Answer 5

Hiện tại không có giải pháp nào đang hoạt động. Đây là giải pháp của tôi. Bạn có thể thêm tiền tố.

box-shadow: inset 0px 0px 0px 0px red; 

Answer 6

Tôi đang làm việc trên firefox. và tôi đã có cùng một vấn đề, văn bản loại đầu vào được tự động xác định một cái gì đó trông giống như inssh boxshadow, nhưng nó không phải. bạn muốn thay đổi là đường viền ... chỉ cần đặt border:0; và bạn đã hoàn tất.

Answer 7

Hãy thử điều này
outline: none;

sống bản demo https://codepen.io/wenpingguo/pen/KQgbXq