It’s not really a submit button, it’s a button, acting as a submit button.
Am I doing something wrong here?
How would I get this to work, am I writing this wrong?
I’ve been trying to figure out how this would be done,
input[type=text] {
height: 30px;
font-size: 22px;
width: 200px;
background: #000000;
color: #0059dd;
border: none;
}
svg {
background: orange;
}
#sent {
width: 32px;
height: 32px;
padding-top: 1px;
padding-bottom: 1px;
margin-left: 5px;
cursor: pointer;
}
.wrap {
width: auto;
display: flex;
}
<svg class="svg" viewBox="0 0 24 24" width="1">
<path id="path_id" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"> </path>
</svg>
<div class="wrap">
<input type="text" id="searchFor" name="someNameHere" placeholder="Search" />
<button id="sent">
<svg viewBox="0 0 24 24" width="24" height="24">
<use xlink:href="#path_id" />
</svg>
</button>
</div>
This was the original code:
Using the actual submit button.
.info {
display: table-cell;
white-space: nowrap;
}
input[type=text] {
font-size: 22px;
width: 200px;
margin-top: 40px;
background: #000000;
color: #0059dd;
border: 1px solid #0059dd;
}
input[type=submit] {
padding-top: 2px;
padding-bottom: 1px;
border: 1px solid #0059dd;
cursor: pointer;
font-size: 22px;
background: black;
color: #0059dd;
font-family: "Times New Roman", Times, serif;
}
<div class="info">
<input type="text" id="searchFor" name="someNameHere" placeholder="Search" />
<input id="sent" type="submit" value="Search" />
</div>
In what way is it ‘not right’? It’s doing exactly what you told it to do.
I have the svg placed in 2 different spots here:
<svg class="svg" viewBox="0 0 24 24" width="1">
<path id="path_id" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"> </path>
</svg>
<div class="wrap">
<input type="text" id="searchFor" name="someNameHere" placeholder="Search" />
<button id="sent">
<svg viewBox="0 0 24 24" width="24" height="24">
<use xlink:href="#path_id" />
</svg>
</button>
</div>
and in one you’ve got width=‘1’, and the other you’ve got width=‘24’. Now we’ll ignore for the moment that a number without a unit is rather unspecific, but that’s the difference. You’ve got the SVG in two spots, but in one of them you’ve made it so small you cant actually see it.
I was just able to remove that here:
<div class="wrap">
<input type="text" id="searchFor" name="someNameHere" placeholder="Search" />
<button id="sent">
<svg class="svg" viewBox="0 0 24 24" width="24" height="24">
<path id="path_id" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"> </path>
<use xlink:href="#path_id" />
</svg>
</button>
</div>
correct. Though at that point the ‘use’ tag is rather redundant, considering you only want the SVG once.
Here, the button needs to be lowered 2 px’s.
<div class="info">
<input type="text" id="searchFor" name="someNameHere" placeholder="Search" />
<button id="sent">
<svg class="svg" viewBox="0 0 24 24" width="24" height="24">
<path id="path_id" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"> </path>
</svg>
</button>
</div>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<style media="screen">
body {
background-color: #f9f9f9;
font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
#searchFor {
height: 2em;
border: 0;
background-color: #000;
color: #fff;
text-indent: 0.5em;
vertical-align: middle;
}
#sent {
width: 2.1em;
height:2.1em;
border: 1px solid #000;
vertical-align: middle;
background-color: #ffa500;
cursor: pointer;
}
#sent svg {
display: block;
margin-left: -0.4em;
}
</style>
</head>
<body>
<div class="info">
<label for="searchFor">Search:</label>
<input type="text" id="searchFor" name="someNameHere" placeholder="Search">
<button id="sent">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>
</button>
</div>
</body>
</html>
1 Like
What if I used a div instead of a button, how would that be written?
#searchFor {
height: 2em;
border: 0;
background-color: #000;
color: #fff;
text-indent: 0.5em;
vertical-align: middle;
}
#sent {
width: 2.1em;
height: 2.1em;
border: 1px solid #000;
vertical-align: middle;
background-color: #ffa500;
cursor: pointer;
}
#sent svg {
display: block;
margin-left: -0.4em;
}
<div class="info">
<label for="searchFor">Search:</label>
<input type="text" id="searchFor" name="someNameHere" placeholder="Search">
<div id="sent">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>
</div>
</div>
system
April 7, 2019, 5:45am
10
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
