Collapse span when input button is hidden
- by Evan
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: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>
