0

これが可能かどうか疑問に思っていました:入力フィールドがある場合:

<input type="button" value="some value" class="icon-button" />

グラデーションの背景、ボーダー、ボックスの影などでスタイルが設定されています。

ボタンをアイコンのように、すべてのスタイルとその横に値テキストを配置したいと考えています。私は次のようなことを考えましたが、うまくいきませんでした：

.icon-button{
    display:block;
    width: 25px;
    height: 25px;
/* gradients, borders, shadows, etc. */
   text-indent: 30px;
   overflow: visible;
}

何か案が？JavaScriptで解決できることは知っていますが、CSSでこれを行う方法があるかどうか知りたいです。

4

1 に答える 1

1

入力を使用してこれを達成するつもりはないと思います (少なくとも、それほどきちんとしたものではありません)。ただし、実際のボタンを使用して送信するようにマークアップを修正できる場合は、非常に簡単です。

<button type="submit">Some value</button>

CSS:

button {
    line-height: 25px;
    border: none;
    background: transparent;
    cursor: pointer;
}

button::before {
    content: '';
    display:inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    margin-right: 3px;
/* gradients, borders, shadows, etc. */
    background: red;
}

spanIE7 のサポートが必要な場合は、生成されたコンテンツではなくを使用できます。input要素を含めることも、コンテンツを生成することもできないため、このアプローチは では不可能です。

入力を使用する必要がある場合は、それをスパンでラップしてスタイリングすることで同じことを実現できます。

于 2013-04-17T09:46:16.483 に答える