如何將兩個單獨的文本樣式添加到CSS中的表單中的按鈕？

我想添加兩個不同的文字樣式到一個單一的按鈕與背景圖像。我確定你可以在下面清楚地看到代碼，但主要樣式用於標記按鈕的功能，而另一個用於定義最近上傳圖像的名稱。如何將兩個單獨的文本樣式添加到CSS中的表單中的按鈕？

我不能完全肯定它可以只在HTML & CSS做，但我想這是值得一試：

我使用範圍嘗試，但沒有在所有的工作：

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; 
}

任何想法？

來源

2012-12-02 mdnash

您不能添加跨度按鈕值都將像串和價值

的爲可以使用的<button>標籤：

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

來源

2012-12-02 14:19:13

也許是一個錯誤的想法;它似乎打開第一個按鈕內的另一個按鈕。我是否有其他選項爲輔助文本添加單獨的樣式？ – mdnash

工作！我只需要清除原始類中的一些樣式，如border：none;背景：無; 謝謝！ – mdnash

使用<button>標籤：

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

該元素確實支持嵌套在其中的內部元素。

來源

2012-12-02 14:19:41

如何將兩個單獨的文本樣式添加到CSS中的表單中的按鈕？

回答

相關問題