Question

我正在尝试设置t:inputFileUpload元素的样式，我尝试了这个解决方案styling an input type=file，它将另一个输入元素和一个图像占据t:inputFileUpload占用的相同位置。这就是我的代码

<div id="file-div">
    <h:inputText styleClass="replace-upload" id="fake-input" />
        <div class="browse-img">
            <span class="browse-button">#{msgs.select}</span>
        </div>
    <t:inputFileUpload id="file" value="#{createListBean.uploadedFile}"
        size="22" accept=".xls,.xlsx,.csv" type="file" style="z-index :2;opacity:0;position:relative;"
        onchange="changeFakeFile()" styleClass="file-real" />
</div>

我的造型

.replace-upload {
    border: 1px solid #EEEEEE !important;
    border-radius: 3px 3px 3px 3px !important;
    box-shadow: 2px 2px 0 0 #CCCCCC inset !important;
    color: #333333 !important;
    font-size: 14px !important;
    margin-top: -5px;
    padding: 5px !important;
    width: 157px !important;
    position: absolute;
    z-index: 1;
}

.browse-img {
    background-color: #333333;
    color: #FFFFFF;
    width: 76px;
    position: absolute;
    left: 171px;
    top:-2px;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 1px #000000;
}

.browse-button {
    color:#FFFFFF;
    cursor: pointer;
    display: block;
    font-size: 12px;
    font-weight: bold;
    line-height: normal;
    padding: 5px 18px;
    text-decoration: none;
}

现在，当用户点击假输入元素时，他实际上会点击战斧元素，主要问题是他选择的路径没有显示在虚假输入上，这就是我为它添加了一些javascript的原因功能

changeFakeFile(){
    var x = $('.file-real').val();
    $('.replace-upload').text(x);}

问题是假输入值是否已更改，但该值未向用户显示，如何显示？

Answer 1

我将$('.replace-upload').text(x);替换为$('.replace-upload').val(x);并且有效。

样式战斧上传文件组件

1 个答案: