jEditable输入框CSS样式

Question

我正在尝试设置使用jEditable呈现的输入框的样式.

我想在双击文本并使其可编辑时更改表格单元格的颜色.像这样:

替代文字http://www.hongaijitsu.com/temp/foobar/public/Picture-2.png

这就是我现在所处的位置:jEditable CSS问题(双击表格单元格中的文本)

HTML片段:

<tr class="odd">
    <td class="dblclick" headers="customer-name">Drogo Shankara</td>
    <td class="dblclick" headers="mail">dshan@gmail.com</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按下文字.我尝试覆盖内联CSS inherit !important,但它不起作用.

这里有一些概念我还没有完全理解,但它可能是完全平庸的.

有什么想法有什么不对？

Answer 1

jQuery/JavaScript 正在操纵 DOM 并在每次双击时动态添加/设置输入字段的宽度。由于内联样式（此处在 DOM 中动态生成）优先于所有其他样式，因此您无法使用附加类中的新属性更改动态呈现的内联样式。如果您想摆脱奇怪的跳跃效果，请删除 screen.css 文件中设置整个表格宽度的属性：

表 { 边框折叠：折叠；/宽度：940px；...消除/ }

当使用固定表格宽度时，计算设置输入字段的宽度时，代码似乎会感到困惑（或者可能有 css 存在“冲突”）。当我从表格中删除宽度时，功能正常并且看起来正常。

希望这有帮助，如果没有帮助请告诉我......