2
所以我可以填寫桌面大小的表格,但是當我需要填寫移動大小(640, 480和320)它不讓我。我通過嘗試發現了一些東西,只是碰巧讓我的光標在我的contactform
div之外,其格式在裏面。然後它讓我輸入除了消息框之外的所有內容,除非我使用tab並且仍然在div之外。我覺得很奇怪?我有一個聯繫表格,適合移動設備的CSS樣式,它不會讓我輸入數據
benlevywebdesign.com 頁面的底部是哪裏的形式是給你的640測試出移動佈局,480,和320
這裏指觸點形式
<form id="form1" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<fieldset>
<p class="form">
<label for="name">Name</label>
<input type="text" name="name" id="name" size="30" />
</p>
<p class="form">
<label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</p>
<p class="form">
<label for="web">Website</label>
<input type="text" name="web" id="web" size="30" />
</p>
</fieldset>
<fieldset>
<p class="form">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</p>
</fieldset>
<p class="submit"><button name="submit" type="submit">Send</button></p>
</form>
這裏我對480和320
@media screen and (max-width:480px){
@media screen and (max-width:320px){
#form1{
padding-top:5px;
}
#form1 fieldset{
margin:0;
padding:0;
border:none;
float:left;
display:inline;
width:190px;
margin-left:15px;
}
#form1 legend{display:none;}
#form1 p{margin:.5em 0;}
#form1 label{display:block;}
#form1 input, #form1 textarea{
width:175px;
border:1px solid #B7B7B7;
background:#fff;
padding:3px;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
}
#form1 textarea{
height:120px;
width:175px;
overflow:auto;
}
#form1 p.submit{
clear:both;
padding:0 25px 5px 25px;
margin:0;
text-align:right;
}
#form1 button{
font-family:Trebuchet MS;
font-size:14px;
width:105px;
height:35px;
border:none;
background-color:#484749;
color:#fff;
border-radius:4px;
cursor:pointer;
text-align:center;
}
是的,我知道它是BU你有谷歌Chrome或IE瀏覽器,因爲它沒有做任何其他瀏覽器的瘋狂的事情,並且這些錯誤是微小的沒什麼大不了的。 – benlevywebdesign
我使用Firefox 11. –
它不會在Chrome,Safari或我的移動設備上執行這些操作,所以我不知道它爲什麼會這麼做。但我最初的問題是必須將光標放在「contactform」div之外,因爲我無法控制移動設備上的光標 – benlevywebdesign