5

これを機能させようとしていますが、まだ何かが正しくありません。

私はすでに持っているものと一致するようにcssで送信ボタンのスタイルを設定したいと考えています。

<input type="submit" name="save_settings" value="Opslaan">

スタイル：

input[type="button"], input[type="submit"], button
{
   background: url("http://gasterijdebakker.nl/email/php/pages/images/layout/bg-btn-left.png") no-repeat scroll left top transparent;
   display: inline-block;
   line-height: 35px;
   padding:7px 0 15px 12px;
   margin:0;
   border:0;
   color: #FFFFFF;
   font-size: 15px;
   font-weight: bold;
   letter-spacing: -1px;
   text-shadow: 0 1px 1px #70A7E0;

}

jsフィドル

4

2 に答える 2

4

背景画像を使用せず、代わりに css3 グラデーションを使用する方がよいでしょう。何かのようなもの：

input[type="button"], input[type="submit"], button
{

  background-color: #a3d4ff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#a3d4ff), to(#88bcf2));
  background-image: -webkit-linear-gradient(top, #a3d4ff, #88bcf2);
  background-image:    -moz-linear-gradient(top, #a3d4ff, #88bcf2);
  background-image:      -o-linear-gradient(top, #a3d4ff, #88bcf2);
  background-image:         linear-gradient(to bottom, #a3d4ff, #88bcf2);
border-radius:3px;
    display: inline-block;
    line-height: 22px;
    padding:7px 12px;
    margin:0;
    border: 1px solid #88bcf2; 
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: -1px;
    text-shadow: 0 1px 1px #70A7E0;
    cursor:pointer;
}​
于 2012-12-29T14:24:12.200 に答える
2

input要素を完全にスタイリングすることはできません。

代わりに、button要素を使用してください。

ボタン要素は、入力要素よりもスタイル設定がはるかに簡単です。内部HTMLコンテンツ（em、strong、さらにはimgを考えてください）を追加し、：afterおよび：before疑似要素を使用して、入力がテキスト値属性のみを受け入れる一方で、複雑なレンダリングを実現できます。

ソース：

Mozilla Developer Network

https://developer.mozilla.org/en-US/docs/HTML/Element/button

于 2012-12-29T16:09:58.180 に答える