私は現在、モバイル用の ASP.NET で最初に記述されたいくつかの単純なフォーム ページのスタイル設定に取り組んでいます。デバイスがモバイルかどうかを判断するために CSS3 でメディア検出を使用しています。これは、私がテストしたほとんどの携帯電話でこれまでのところ機能していましたが、iOS6 では、「ファイルを選択」ボタンが他のすべての要素のように大きくなることを頑固に拒否しています。ID またはすべての入力でスタイルを設定しようとしましたが、色やフォントは変更できますが、サイズは変更されません。ファイルの選択ボタンを大きく見せるにはどうすればよいですか?
私のCSSページ:
@import url(master.css);
/* --- page wrapper --- */
#wrapper { width:80%; margin:auto; max-width:1200px; position:relative; border:1px solid #000; background-color:#000; }
#main { width:100%; height:100%; border-bottom:1px solid #000; }
#content { height:100%; background-color:#CDCCCC; padding: 20px 50px 20px 50px; }
#login { text-align:center; }
#upload { padding:10px; }
#list { display: inline; width: auto; height: auto; }
#logoutButton { display: inline; float: right; }
#guidelines {
text-align:justify;
}
#flash {
padding: 20px;
}
@media only screen and (max-width: 720px), only screen and (max-device-width: 720px) {
#logoutButton {
display: inline;
float: right;
}
#guidelines {
background-image:url(http://cite.nwmissouri.edu/PhotoContest_MobileApp/transparentbg4androidwidthbug.png);
background-repeat:repeat;
text-align:inherit;
height:100%;
background-color:#CDCCCC;
}
#hwrapper {
width:initial;
}
#contentum {
height: 100%;
width:inherit;
background-color:#CDCCCC;
text-align:inherit;
font-size:40px;
padding-right: 5px;
}
input {
font-size:40px;
height:inherit;
width:inherit;
}
select {
font-size:40px;
height:auto;
width:inherit;
}
#upload {
font-size: 40px;
text-align: start;
height: 100%;
width: 100%;
padding-right: 12px;
}
#wrapper {
width:inherit;
height:inherit;
margin:auto;
position:inherit;
border:1px solid #000;
background-color:#000;
overflow:scroll;
}
li {
font-size: 40px;
text-align: start;
}
}