asp.net - 手机造型； "Choose File"iOS 6 按钮太小

Question

我目前正在设计几个最初用 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;
    }
}

Answer 1

据我了解，您希望文件上传 ( <input type="file"/> ) 按钮显示得更大一些？

您应该能够为 WebKit 使用以下(非标准)伪元素选择器:

input[type="file"]::-webkit-file-upload-button {
    /* add styles here, such as width, height etc. */
}

您可以在 IE10 中使用(类似的非标准)执行相同的操作:

input[type="file"]::-ms-browse {
    /* add styles here, such as width, height etc. */
}