CODEWITHSUNDEEP
htmlcsssvglabel
Reporter
Reporter

Reputation: 3948

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

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?

Upvotes: 0

Views: 57

Answers (2)

Danny &#39;365CSI&#39; Engelman
Danny &#39;365CSI&#39; Engelman

Reputation: 21253

Best long term plan is to learn SVG. You are now stacking SVG transforms upon CSS padding alignments. Building a tower of a Babel.

Garbage in is garbage out

Learn tools like:

Only after your SVG is optimized can you use it optimal in your HTML code

Alignment issues left in for educational puposus

<style>
  svg {
    background: pink;
    width:160px;
    display: inline-block;
    font-size: 1em
  }
</style>

<svg viewBox="0 0 30 30">
  <path d="M16 7l-3-3h-11v21h26v-18h-11zm-2 5 6 6h-4v7h-3v-7h-4l6-6z"></path>
</svg>

<svg viewBox="0 0 38 38" style="background:coral">
  <path d="M20 7l-3-3h-11v21h26v-18h-11zm-2 5 6 6h-4v7h-3v-7h-4l6-6z"></path>
</svg>

<svg viewBox="0 0 30 30" style="background:blue;fill:yellow">
  <path d="M20 10l-3-3h-11v21h26v-18h-11zm-2 5 6 6h-4v7h-3v-7h-4l6-6z"></path>
</svg>

This code also available in https://jsfiddle.net/WebComponents/gypqetks/

Once the SVG is correct you can adjust the viewBox="x y width height".

And the startposition of the <path d="M x y " paths

Learning time investment now, pays of in your SVG future

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115289

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>

Upvotes: 0

Related Questions