可编辑的输入框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样式

回答

相关问题