开发者

Collapse span when input button is hidden

I have a style that wraps around an input button, so the button can be styled very creatively. When the button is hidden in .Net, i would like the style to collapse so it renders like its hidden as well. What the style does, as a result of no value in the button or its hidden, is it keeps a small shape.

Click to see a demo: 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:ho开发者_Python百科ver 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>


Unfortunately there is no way to style an element depending on it's content.

How about styling the <button> element instead:

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


this guy has a better solution than mine. i don't have to use "button" after all, which is what i see everyone claiming is required to style a form button. i can still use "input", which is required for .net, and when the button is hidden the style will disappear appropriately.

See Demo: http://fortysevenmedia.com/tuts/cssbuttons/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜