代码之家 › 专栏 › 技术社区 › Paul

如何在输入值中包含图像

input css html

Paul · 技术社区 · 6 年前

您将在代码段中看到我有两个按钮。一个称为“不包括”,另一个称为“包括”。包含的按钮是我想要的 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>

1 回复 | 直到 6 年前

cnnr 6 年前

您是否可以使用 button type='submit' 而不是 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>
<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>

推荐文章

Thinkpad · Excel引用基于字符串的范围

2 年前

DwightD · Python 3中的用户输入和排序列表

6 年前

Hans Daigle · Python交互式控制台使用curses lib getstr()函数不等待用户输入

6 年前

ÐÐ¸ÐºÐ¸ÑÐ° Ð¨Ð¸ÑÐºÐ¸Ð½ · 如何从字符串(Python3)创建函数[已关闭]

6 年前

Wacky Mode-On · Python:3-在找到关键字后将字符串设为变量?

6 年前

P S · 在laravel 5.5中输入不起作用时重定向回

6 年前

Paul · 如何在输入值中包含图像

6 年前

Mose · c++中带有输入函数的Lambda auto给出错误

6 年前

Henri Wurm · 首先将第一个输入保存到文件夹中,然后引用它

6 年前

Andres Concha · 如何使用Vue设置和获取输入组件的值。js?

6 年前