相关疑难解决方法(0)

我正在尝试根据个人喜好设置文件上传按钮的样式,但如果没有JS,我找不到任何真正可行的方法.我确实找到了 关于这个主题的另外两个问题,但那里的答案要么涉及JavaScript,要么建议采用Quirksmode的方法.

这个Quirksmode方法的主要问题是文件按钮仍然具有浏览器定义的尺寸,因此它不会自动调整为用作放置在它下面的按钮的任何东西.我已经制作了一些基于它的代码,但它只占用了文件按钮通常占用的空间,所以它根本不会像我想要的那样填充父div.

HTML:

<div class="myLabel">
    <input type="file"/>
    <span>My Label</span>
</div>

CSS:

.myLabel {
    position: relative;
}
.myLabel input {
    position: absolute;
    z-index: 2;
    opacity: 0;
    width: 100%;
    height: 100%;
}

这个小提示演示了这种方法是如何存在严重缺陷的.在Chrome中,单击!!下面的第二个演示按钮将打开文件对话框,但在所有其他浏览器中,文件按钮不会占用按钮的正确区域.

有没有更坚实的方式来设置文件上传按钮的样式,没有任何JavaScript,并且最好使用尽可能少的"hacky"编码(因为黑客通常带来其他问题,例如小提琴中的那些)？

Safari和Chrome以及Opera和Firefox可以处理:hover伪类和邻近兄弟选择器:

a:hover + div {}

这有效.

但是,当添加另一个相邻兄弟时:

div:hover + a + div {}

Webkit崩溃了.

但是,如果你第一次将鼠标悬停在<a>与随后的悬停<div>样式应用,因为它应该.

我更加困惑,因为如果你添加:

div:hover ~ div {}

无论是否声明了样式,它都会按照应有的方式开始工作.

演示

我看到这个问题:

• 谷歌浏览器15.0.874.121
• Safari 5.1.1

对于OS X.

有任何想法吗？

在这个问题" CSS3选择器,像jQuery的.click()？ "我发布了一个回答使用的:checked状态input,type="checkbox"以切换元素的显示.

这是我在答案中发布的演示的HTML:

<input type="checkbox" id="switch" />
<nav>
    <h2>This would be the 'navigation' element.</h2>
</nav>
<label for="switch">Toggle navigation</label>

和CSS(为了简洁而剥离过渡):

#switch {
    display: none;
}
#switch + nav {
    height: 0;
    overflow: hidden;
    /* transitions followed */
}
#switch:checked + nav {
    height: 4em;
    color: #000;
    background-color: #ffa;
    /* transitions followed */
}

label {
    cursor: pointer;
}

JS小提琴演示.

有一次,我张贴发生,我认为我们可以在答案也切换的文本label用于触发复选框的状态变化,使用下面的选择(已修订label的文本'导航’):

label {
    display: inline-block;
    cursor: …