I am currently in the process of styling a couple of basic form pages that were originally created in ASP.NET for mobile devices. In order to enhance the display for mobile users, I am utilizing CSS3 media detection to identify when the device is mobile and adjusting the styling accordingly by making elements appear larger. While this approach has been successful with most phones I have tested, I encountered an issue with the "choose file" button not resizing on iOS6. Despite my attempts to style it using its ID or applying styles to all input elements, I was unable to change the size of the button. How can I resolve this issue and make the "choose file" button appear larger?
Below is a snippet from my CSS stylesheet:
@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 queries for mobile devices */
@media only screen and (max-width: 720px), only screen and (max-device-width: 720px) {
#logoutButton {
display: inline;
float: right;
}
/* Additional styles for mobile view */
#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;
}
}