Question

我想知道这是否可能：如果我有输入字段：

<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方法可以做到这一点。

Answer 1

我认为你不会使用输入来达到这个目标（至少不是非常整齐）。如果您可以修改标记以使用实际按钮提交，则为pretty trivial：

<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无法使用此方法，因为它不能包含任何元素，也不能生成内容。

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

通过css将输入按钮的值放在按钮旁边

1 个答案: