HTML: Unable to adjust svg image inside a <label> tag

April 13, 2024

I have an html that uses a file input field <input name="fileinput" type="field"> The apperance is overlayed with own text by using the label tag. Now I want to use an svg image instead of an ordinary text

        <input type='file' name="fileinput" id="fileinput" style="display:none">
        <label for="fileinput" style="border: 1px solid red;">
            <svg id="imp" width="25px" height="25px" viewBox="0 0 59 30" style="margin-left: calc(50% - 0.5em)">
                <g transform="scale(0.03125 0.03125)">
                    <path d="M576 256l-128-128h-448v832h1024v-704h-448zM512 480l224 224h-160v256h-128v-256h-160l224-224z"></path>
                </g>
            </svg>
        </label><br>
        <button type="button" id="export" onClick="export()">
        <svg alt="Export" width="25px" height="25px" viewBox="0 0 59 30" style="margin-left: calc(50% - 0.5em)"><g transform="scale(0.03125 0.03125)"><path d="M576 256l-128-128h-448v832h1024v-704h-448zM512 864l-224-224h160v-256h128v256h160l-224 224z"></path></g></svg>
        </button>

I’m unable to style the label so it looks like a button. Is there a way to achive this goal? May I have to convert the image to a different format?

Thanks in advanced

>Solution :

Give the label a display property of, say, inline-block and add whatever additional styles you might need.

label {
  display: inline-block;
  padding: 0 .5em;
  background: lightgrey;
  margin-bottom: .25em;
}

<input type='file' name="fileinput" id="fileinput" style="display:none">
<label for="fileinput" style="border: 1px solid red;">
            <svg id="imp" width="25px" height="25px" viewBox="0 0 59 30" style="margin-left: calc(50% - 0.5em)">
                <g transform="scale(0.03125 0.03125)">
                    <path d="M576 256l-128-128h-448v832h1024v-704h-448zM512 480l224 224h-160v256h-128v-256h-160l224-224z"></path>
                </g>
            </svg>
        </label><br>
<button type="button" id="export" onClick="export()">
        <svg alt="Export" width="25px" height="25px" viewBox="0 0 59 30" style="margin-left: calc(50% - 0.5em)"><g transform="scale(0.03125 0.03125)"><path d="M576 256l-128-128h-448v832h1024v-704h-448zM512 864l-224-224h160v-256h128v256h160l-224 224z"></path></g></svg>
        </button>