隱藏輸入按鈕時的摺疊範圍

我有一種環繞輸入按鈕的樣式，所以按鈕的樣式非常有創意。當按鈕隱藏在.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>

來源

2010-05-12 Evan

不幸的是沒有辦法樣式取決於它的內容的元素。

怎麼樣的造型元素<button>改爲：

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

來源

2010-05-12 15:59:04 RoToRa

我想我要的是讓跨度縮小/摺疊的邊時，有跨度內的跨度和只有在那裏的數據時之間沒有數據，將其延伸到適當的尺寸。從我的演示中可以看出，第二個例子顯示了一種風格：http://media.apus.edu/it/evan-testing/button.htm – Evan 2010-05-12 17:12:09

這傢伙比我更好的解決方案。畢竟，我不必使用「按鈕」，這是我看到每個人都聲稱需要樣式表單按鈕。我仍然可以使用.net所需的「輸入」，當隱藏按鈕時，風格將適當地消失。

見演示：http://fortysevenmedia.com/tuts/cssbuttons/

來源

2010-05-13 03:04:03 Evan

隱藏輸入按鈕時的摺疊範圍

回答

相關問題