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/
精彩评论