Question

我有一个包围输入按钮的样式，因此按钮可以非常有创意地设置样式。当按钮隐藏在.Net中时，我希望样式可以折叠，因此它也会像隐藏一样呈现。风格的作用是，由于按钮中没有任何值或其隐藏，它保持一个小的形状。

点击查看演示：http://media.apus.edu/it/evan-testing/button.htm

<style>
.button {
    cursor:pointer;
    text-decoration:none;
    background:url(button_bg.gif) no-repeat right top; 
    padding-right:10px;
    display:inline-block;
    line-height:29px;
    height:29px;
    font-size:12px;
    color:#FFFFFF;
    font-weight:bold;
}

span.button {
    vertical-align: middle;
}

.button span { 
    background:url(button_bg.gif) no-repeat left top;
    padding-left:10px;
    line-height:20px;
    height:29px;
    display:inline-block;
}

.button span span {
    background:transparent;
    padding:0;
    font-size:12px;
}

.button span input {
    cursor:pointer;
    font-weight:bold;
    background:transparent;
    border:0;
    padding-top:.4em;
    font-size:12px;
    font-family:verdana;
    color:#FFFFFF;
}

.button:hover {
    background-position:right -39px;
}

.button:hover span {
    background-position:left -39px;
}

.button:active {
  background-position:right -78px;
}

.button:active span {
  background-position:left -78px;
}
</style>

Input button wrapped in a span with no value: 
<span class="button"><span><input type="button" value=""></span></span>

<P>

Input button wrapped in a span with a value: 
<span class="button"><span><input type="button" value="test"></span></span>

<P>

Span with no data value: 
<span class="button"><span></span>

Answer 1

不幸的是，没有办法根据元素的内容设置元素的样式。

如何设置<button>元素的样式：

<button><span><span>Test</span></span></button>

Answer 2

这家伙比我的解决方案更好。毕竟我不必使用“按钮”，这是我看到每个人都声称需要设置表单按钮的样式。我仍然可以使用.net所需的“输入”，当按钮被隐藏时，样式将会相应地消失。

请参阅演示：http://fortysevenmedia.com/tuts/cssbuttons/

隐藏输入按钮时的折叠范围

2 个答案: