可編輯的輸入框CSS樣式

我想改變表格的顏色，當文本被雙擊並且可編輯時。就像這樣：

alt text http://www.hongaijitsu.com/temp/foobar/public/Picture-2.png

這是我的時刻，其中：jEditable CSS Problem（雙擊表格中的細胞上的文字）

HTML片段：

<tr class="odd"> 
    <td class="dblclick" headers="customer-name">Drogo Shankara</td> 
    <td class="dblclick" headers="mail">[email protected]</td> 
    <td class="dblclick" headers="type">Web</td> 
    <td class="dblclick" headers="status">Pending mail</td> 
</tr>

jQuery代碼：

$(function() { 

$(".dblclick").editable("#", { 
    tooltip : "Doubleclick to edit...", 
    event  : "dblclick", 
    css : 'inherit' 
    }); 
});

相應的CSS：

.dblclick form { 
    height: inherit !important; 
    width: inherit !important; 
    border: 0; 
    margin: 0; 
    padding: 0; 
    background: red; 
    } 

.dblclick input { 
    height: inherit !important; 
    width: inherit !important; 
    border: 0; 
    margin: 0; 
    padding: 0; 
    font: inherit; 
    color: inherit; 
    }

我想輸入框繼承父表單元格高度&寬度，但是當我看到輸入框在Firebug它有一個內聯CSS高度&寬度已經設置，從而導致當按下td文本時，可以縮放表格單元格。我嘗試用inherit !important覆蓋內聯CSS，但它不起作用。

這裏有一些概念，我沒有完全理解，但它可能是完全平庸的。

任何想法是什麼錯？

來源

2008-10-01 timkl

jQuery/JavaScript正在操縱DOM並在每次雙擊時動態添加/設置輸入字段的寬度。由於內聯樣式（此處在DOM中動態生成）優先於所有其他樣式，因此不能使用附加類中的新屬性更改動態渲染內聯樣式。如果你想擺脫怪跳躍效果，刪除該屬性設置整個表格的寬度在screen.css文件：

表{ 邊界崩潰：崩潰; /寬度：940px; ...除去/ }

看來，碼計算的寬度來設置輸入字段使用固定表寬度（或也許有CSS某處是「衝突」）時，當得到困惑。當我從表格中刪除寬度時，功能起作用並且看起來沒問題。

希望這有助於，讓我知道如果它不...

來源

2008-10-01 20:01:03

可編輯的輸入框CSS樣式

回答

相關問題