Свернуть диапазон, когда кнопка ввода скрыта

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

у этого парня лучшее решение, чем у меня. В конце концов, мне не нужно использовать «кнопку», это то, что, как я вижу, все утверждают, что требуется оформить кнопку формы. я все еще могу использовать «ввод», который требуется для .net, и когда кнопка скрыта, стиль исчезнет соответствующим образом.

См. Демонстрацию: http://fortysevenmedia.com/tuts/cssbuttons/

Answer 2

К сожалению, нет способа стилизовать элемент в зависимости от его содержимого.

Как насчет стилизации элемента <button> вместо:

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