Xóa bóng đầu vào iOS

Trên iOS (Safari 5), tôi phải làm theo đối với phần tử đầu vào (bóng trên cùng bên trong):

Tôi muốn loại bỏ bóng trên cùng, lỗi -webkit-appearancekhông lưu.

Phong cách hiện tại là:

input {    
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

Bạn sẽ cần sử dụng -webkit-appearance: none;để ghi đè các kiểu IOS mặc định. Tuy nhiên, chỉ chọn inputthẻ trong CSS sẽ không ghi đè các kiểu mặc định của IOS, vì IOS thêm các kiểu của nó bằng cách sử dụng bộ chọn thuộc tính input[type=text]. Do đó, CSS của bạn sẽ cần sử dụng bộ chọn thuộc tính để ghi đè các kiểu CSS IOS mặc định đã được thiết lập trước.

Thử đi:

input[type=text] {   
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Then Style */
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
}

Liên kết hữu ích:

Bạn có thể tìm hiểu thêm về appearancetại đây:

http://css-tricks.com/almanac/properties/a/appearance/

Nếu bạn muốn tìm hiểu thêm về bộ chọn thuộc tính CSS, bạn có thể tìm thấy một bài viết rất nhiều thông tin tại đây:

http://css-tricks.com/attribute-selectors/

background-clip: padding-box;

Có vẻ như để loại bỏ các bóng tối.

Như @davidpauljunior đã đề cập; hãy cẩn thận cài đặt -webkit-appearancetrên bộ chọn đầu vào chung.

webkit sẽ xóa tất cả các thuộc tính

-webkit-appearance: none;

Thử sử dụng thuộc tính box-shadow để loại bỏ bóng trên phần tử đầu vào của bạn

box-shadow: none !important;

Tôi đã cố gắng đưa ra một giải pháp mà a.) Hoạt động và b.) Tôi có thể hiểu tại sao nó hoạt động .

Tôi biết rằng bóng cho đầu vào (và đường viền tròn cho đầu vào [type = "search"]) đến từ hình nền.

Vì vậy, rõ ràng thiết lập background-image: nonelà nỗ lực đầu tiên của tôi, nhưng điều này có vẻ không hiệu quả.

Cài đặt background-image: url()hoạt động, nhưng tôi vẫn lo lắng về việc có một trống url(). Thay vào đó, nó hiện tại chỉ là một cảm giác tồi tệ.

background-clip: padding-box; dường như cũng hoạt động tốt, nhưng ngay cả sau khi đọc tài liệu về "background-clip", tôi không hiểu tại sao điều này lại hoàn toàn loại bỏ nền.

Giải pháp yêu thích của tôi:

background-image: linear-gradient(transparent, transparent);

Đây là css hợp lệ và tôi hiểu nó hoạt động như thế nào.

Trong khi câu trả lời được chấp nhận là một khởi đầu tốt, như những người khác đã chỉ ra, nó chỉ hoạt động cho đầu vào mà typelà "text". Có vô số kiểu đầu vào khác cũng hiển thị dưới dạng hộp văn bản trên iOS và vì vậy chúng ta cần mở rộng quy tắc này để tính đến những kiểu khác này.

Đây là CSS tôi đang sử dụng để loại bỏ các trường văn bản đầu vào và vùng văn bản của bóng bên trong, trong khi vẫn giữ kiểu dáng mặc định cho các nút, hộp kiểm, thanh trượt phạm vi, menu thả xuống ngày / giờ và nút radio, tất cả đều được tác giả sử dụng <input>thẻ khiêm tốn .

textarea,
input:matches(
  [type="email"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"]
) {
  -webkit-appearance: none;
}

Điều này làm việc tốt hơn cho tôi. Thêm vào đó, nó có nghĩa là tôi không phải áp dụng nó cho mọi loại đầu vào khác nhau (tức là văn bản, điện thoại, email, v.v.).

* {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}