Question

我目前正致力于设计几个最初用ASP.NET for mobile编写的简单表单页面。我在CSS3中使用媒体检测来确定设备是否是移动的，如果是，我基本上会让一切看起来更大。到目前为止，这在我测试的大多数手机中都有效，但在iOS6中，选择文件＆＃34;按钮固执地拒绝像其他元素一样变大。我已尝试通过其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. */
}

移动样式; iOS 6中的“选择文件”按钮太小

1 个答案: