时间戳

首页 > 解决方案 > 如何自动调整自定义上传按钮的宽度？

css - 如何自动调整自定义上传按钮的宽度？

问题描述

我正在为网站上的网络表单开发自定义上传按钮，但无法正确处理宽度。

我覆盖了默认输入标签并实现了自定义标签。我希望标签也显示上传的文件名，因此我将其分为两部分（1. 文本和 2. 上传按钮）。

当焦点在上传按钮上时，我需要一个边框出现。但是标签对象（带边框）总是比其中的 2 个跨度对象短。此外，如果我调整跨度内的文本，标签会变宽，但仍会在第二个跨度结束之前裁剪（它总是在文本的同一部分裁剪......大约 3 个字母总是在标签边框之外） .

所以我的问题是：如何调整标签的宽度以始终适合其中的两个跨度。

为了您的理解，这里有一个例子：

.wrapper {
    width: 60vw;
    height: 50vh;
    background: rgba(0,0,0,.05);
    margin: auto auto;
}

.inputFile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    position: absolute;
    z-index: -1;
}

.inputFile + label {
    font-size: 1rem;
    display: inline-flex;
    cursor: pointer;
    white-space: nowrap;
}


.inputFile + label > span.labelFileButton  {
    background-color: blue;
    border: 1px solid blue;
    color: white;
    padding: 2%;
}
.inputFile + label > span.labelFileAnzeige  {
    color: black;
    border: 1px solid blue;
    padding: 2%;
}

.inputFile:focus + label,
.inputFile + label:hover {
    border: 3px solid red;
}
<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="css.css">
    <script type="text/javascript" src="js.js"></script>
</head>
<body>

    <div class="wrapper">
        <input type="text" id="texteingabe">
        <label for="texteingabe">Texteingabe</label>


        <input type="file" id="uploadInput" class="inputFile">
        <label for="uploadInput" class="labelFile">
            <span class="labelFileButton">
                Eine Datei hochladen
            </span>
            <span class="labelFileAnzeige">
                Keine Datei ausgewählt
            </span>
        </label>
    </div>
</body>

非常感谢您的任何意见或帮助！

最好的，亚瑟

标签： cssformsbuttonfile-upload

解决方案

推荐阅读