Help with Form styling of svg in the value ' '

HTML & CSS
1

In this successfully working Search Box Form the svg appears successfully where it is, but I also need it to appear in value= ’ ’

<input type='search' placeholder='Search Location...' name='search_sub' class='searchbox-input' onkeyup='buttonUp();' required>

<input type='submit' class='searchbox-submit' value=' '>

<span class='searchbox-icon'><svg style='height:1.5em; width:1.5em;' viewBox='0 0 12 13'><g stroke-width='2' stroke='#c07373' fill='none'><path d='M11.29 11.71l-4-4'/><circle cx='5' cy='5' r='4'/></g></svg></span>

any guidance with this is appreciated.

2

You can’t put html in a value attribute of an input. You should use the button element with a type of submit instead.

<button type='submit' class='searchbox-submit'>
  <span class='searchbox-icon'><svg style='height:1.5em; width:1.5em;' viewBox='0 0 12 13'>
      <g stroke-width='2' stroke='#c07373' fill='none'>
        <path d='M11.29 11.71l-4-4' />
        <circle cx='5' cy='5' r='4' />
      </g>
    </svg></span>
</button>
1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.