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

如果需要 IE7 支持，您可以使用span而不是生成的内容。这种方法不适用于input，因为它不能包含任何元素，也不能生成内容。

如果您需要使用输入，则可以通过将其包装在跨度中并对其进行样式设置来实现相同的目的。

于 2013-04-17T09:46:16.483 回答