Bộ chọn ngày trên iOS HTML5 sẽ không chấp nhận chiều rộng: 100%;

Question

Tôi có bộ chọn ngày html5 trong biểu mẫu của mình cho phiên bản di động của trang web của tôi. Tất cả các văn bản đầu vào của tôi được thiết lập để chiều rộng: 100% và td mẹ của nó được thiết lập để padding-right: 15px để làm cho nó phù hợp. Điều này có nghĩa là các trường của tôi được định dạng độc đáo và điều chỉnh để luôn lấp đầy một nửa container khi hướng của thiết bị thay đổi. Tuy nhiên bộ chọn ngày không hoạt động theo cùng một cách, bất kỳ ai cũng có thể trợ giúp?

Mẫu:

<form method="get" action="home"> 
<table id="form"> 
<tr><td> 
<input type="text" name="Title" class="tbox" placeholder="Title" /> 
</td><td> 
<input type="text" name="Genre" class="tbox" placeholder="Genre" /> 
</td></tr> 
<tr><td> 
<input type="text" name="Location" class="tbox" placeholder="Location" /> 
</td><td> 
<input type="date" name="Date" class="tbox" placeholder="DD/MM/YY" /> 
</td></tr> 
<tr><td> 
<input type="text" name="postcode" class="tbox" id="postcode" placeholder="Postcode" /> 
</td><td> 
<input type="number" name="radius" class="tbox" placeholder="Mile Radius" /><br /> 
</td></tr> 
</table> 
<input type="submit" value="Search" /> 
</form> 

liên quan CSS:

.tbox { 
background-color: #a1c9ff; 
border: 1px solid #003f94; 
width: 100%; 
height: 30px; 
margin: 3px 2px; 
padding: 0 5px; 
border-radius: 15px; 
font-size: 18px; 
float: left; 
} 

table#form tr td { 
overflow: hidden; 
padding-right: 15px; 
} 

Answer 1

.tbox { 
    min-width:100%; 
} 
table#form {  
    width:100%; 
} 

chiều rộng sử dụng 100% cho bảng # hình thức và min-width: 100% cho .tbox, tôi hy vọng điều này có thể giải quyết vấn đề của bạn. đã cập nhật jsfiddle http://jsfiddle.net/brfQf/1/

Answer 2

Dường như .tbox có cả chiều rộng 100% và padding. Điều này sẽ dẫn đến hộp mở rộng ra ngoài khu vực mong muốn của nó. Để giải quyết điều này, bạn có thể thử thêm box-sizing: border-box;

.tbox { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

Answer 3

css này phong cách sửa chữa các vấn đề trong điện thoại di động Safari:

-webkit-appearance: none; 

Tuy nhiên, nó thay đổi diện mạo đầu vào.

Answer 4

Nó có thể sử dụng một giá trị cố định, Vì vậy, bạn có thể sử dụng đơn vị này để làm cho nó đầy đủ màn hình:

width: 100vw 

Nhưng bạn cần phải xem xét khả năng tương thích của nó, đây là một liên kết về tính tương thích của nó:

http://caniuse.com/#search=vw