gpt4 book ai didi

css - 样式 p :upload simple inputbutton

转载 作者:太空宇宙 更新时间:2023-11-04 10:40:09 25 4
gpt4 key购买 nike

我想为 PrimeFaces 组件的输入按钮 type="file"设置样式 <p:fileUpload value="#{dms.fileToUpload}" mode="simple" skinSimple="true" styleClass="chooseFile"/> .

enter image description here

如您所见,` 的整个背景都发生了变化,而不是输入按钮本身。是否可以更改按钮的样式?

我正在使用 PrimeFaces 5.1

最佳答案

在旧的 PrimeFaces 版本中,简单上传使用纯 html 上传 cannot be styled . PrimeFaces 5.1 是无法直接设置简单上传样式的版本之一。

如果您在 for 属性中使用正确的值(我在展示中尝试过), fiddle 中的解决方法可能会起作用。

但较新的版本使用了由 skinSimple="true" attribute 启用的“包装解决方法”您似乎在想的在您的版本中也可用,但事实并非如此。 PrimeFaces 然后生成以下 html 作为上传小部件的一部分:

<span class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
<span class="ui-button-icon-left ui-icon ui-c ui-icon-plusthick"/>
<span id="j_idt88:j_idt89_label" class="ui-button-text ui-c">Choose</span>
<input id="j_idt88:j_idt89_input" name="j_idt88:j_idt89_input" aria-labelledby="j_idt88:j_idt89_label" type="file" />
</span>

这个 ui-button 可以是任何你喜欢的样式,因为它“包装”了实际上不可见的真实文件输入。

你可以在 PrimeFaces showcase 中玩这个

关于css - 样式 p :upload simple inputbutton,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35867007/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com