时间戳

首页 > 解决方案 > 如何在输入值中包含图像

html - 如何在输入值中包含图像

问题描述

您将在片段中看到我有两个按钮。一个叫做“不包含”，另一个叫做“包含”。包含的按钮是我希望input type="submit"按钮工作的方式。我不确定如何在值之后放置图像。

这可能吗？我该怎么做？

.bigButtonLink {
	text-decoration: none;
	display: inline-block;
	text-align: center;
	margin: 50px auto;
}
.bigButton {
	border: 1px solid #BE1E2D;
	-webkit-appearance: none;
	border-radius: 2px;
	box-sizing: border-box;
	background: #FFF;
	font-family: 'Muli', sans-serif;
	color: #B82222;	
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid #B82222;
	font-size: 2.3rem;
	padding: 3rem 6rem 3rem 4.5rem;
}
.rightArrowR {
	width: 30px;
	height: 30px;
	margin-left: 17px;
	transition: all .35s ease;-webkit-transition: all .35s ease;
}
.bigButton:hover .rightArrowR {
	background-size: 15px 15px;
	background-repeat: none;
	transition: all .35s ease;-webkit-transition: all .35s ease;
	transform: translateX(15px);-webkit-transform: translateX(15px);
}
<p>Not Included</p>
<input name="submit" id="quoteSubmit" class="block bigButton" type="submit" value="SEND PROJECT QUOTE">
<p>Included</p>
<a href="#" class="bigButtonLink bigButton">
  Request Quote <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-512.png" class="rightArrowR">
</a>

标签： htmlcssinput

解决方案

您可以使用button type='submit'代替input type='submit'吗？我在下面稍微更改了您的代码段。Yon 可以将它用于正常的提交操作。

.bigButtonLink {
	text-decoration: none;
	display: inline-block;
	text-align: center;
	margin: 50px auto;
}
.bigButton {
	border: 1px solid #BE1E2D;
	-webkit-appearance: none;
	border-radius: 2px;
	box-sizing: border-box;
	background: #FFF;
	font-family: 'Muli', sans-serif;
	color: #B82222;	
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid #B82222;
	font-size: 2.3rem;
	padding: 3rem 6rem 3rem 4.5rem;
}
.rightArrowR {
	width: 30px;
	height: 30px;
	margin-left: 17px;
	transition: all .35s ease;-webkit-transition: all .35s ease;
}
.bigButton:hover .rightArrowR {
	background-size: 15px 15px;
	background-repeat: none;
	transition: all .35s ease;-webkit-transition: all .35s ease;
	transform: translateX(15px);-webkit-transform: translateX(15px);
}
<p>Not Included</p>
<input name="submit" id="quoteSubmit" class="block bigButton" type="submit" value="SEND PROJECT QUOTE">
<p>Included</p>
<button type="submit" class="bigButtonLink bigButton">
  Request Quote <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-512.png" class="rightArrowR">
</button>

推荐阅读