背景画像のある1つのボタンに2つの異なるテキストスタイルを追加しようとしています。以下のコードをはっきりと読むことができると思いますが、メインスタイルはボタンの機能にラベルを付けるために使用され、もう一方は最近アップロードされた画像の名前を定義するために使用されます。
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;
}
何か案は?