如何在 CSS 中的表单中向按钮添加两种单独的文本样式

Question

我正在尝试将两种不同的文本样式添加到带有背景图像的单个按钮上。我相信您可以清楚地阅读下面的代码，但主要样式用于标记按钮的功能，而另一个样式用于定义最近上传的图像的名称。

我不完全确定它是否可以单独在HTML和CSS中完成，但我想值得一试：

我尝试使用span，但这根本不起作用：

.HTML：

<form><input type="button" class="arrivalbutton" value="From my Drive <span class="arrivalbutton">Top of Stelvio Pass.jpg</span>" /> </form>

.CSS：

.arrivalbutton {
width:494px;
height:31px;
border:1px solid #ccc;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
margin-bottom:10px;
font-family: Helvetica, sans-serif;
font-weight:bold;
font-size: 14px;
padding: 2px 0 0 8px;
text-align: left;
color: #f32114;
background:url(../images/buttonbackground.png);
    transition:background .25s ease-in-out;
    -moz-transition:background .25s ease-in-out;
    -webkit-transition:background .25s ease-in-out;
}
.arrivalbutton span {
font-family: Helvetica, sans-serif;
font-weight:normal;
font-size:14px;
float:left;
margin-left:10px;
}

有什么想法吗？

Answer 1

你不能将span添加到按钮值中，所有的行为都像字符串或值

为此，您可以使用 <button> 标记：

<button type="button" class="arrivalbutton">From my Drive <span class="arrivalbutton">Top of Stelvio Pass.jpg</span></button>

Answer 2

使用 <button> 标签：

<button type="button" class="arrivalbutton">From my Drive <span class="arrivalbutton">Top of Stelvio Pass.jpg</span></button>

此元素支持嵌套在其中的内部元素。