用于内联编辑的 css答案

【问题标题】：css for inline editing用于内联编辑的 css
【发布时间】：2010-12-16 07:47:30
【问题描述】：

我正在尝试制作一个具有内联编辑功能的表单（使用 jEditable），但我正在努力使用 CSS。我希望它看起来适度可用，并且似乎有两个方面我正在尝试清理：

如何设置“可编辑”跨度/文本的样式，以便用户可以明显看出它确实是可编辑的？
如何以合理的方式从 span/text 过渡到 input 元素（您会使用什么 css 样式）？

谢谢

【问题讨论】：

如果您使用 jEditable，则没有真正的方法可以在不编辑源代码的情况下进行转换。现在在做一个 jsfiddle。

标签： jquery html css jeditable

【解决方案1】：

我认为这可能是一个纯 CSS 问题，但我看到您使用的是 jeditable。如果我可以从 css 的角度解决它，这就是我会做的。

要将该区域显示为可编辑，请给它一条虚线，当悬停时，将边框从虚线更改为插入，使背景略微变灰。

// normal state
.editable{
  border:2px dotted #CCC;
}

// hovered state
.editable:hover{
  border:2px inset #f5f5f5;
}

单击时，将边框更改为较深的纯色并使背景变为黄色。

// while editing
textarea{
    border:1px solid #333;
    background:#FFFFEB;
 }

Here's an example，我希望这至少从样式的角度来看会有所帮助。纯属个人意见。

（编辑：顺便说一句，单击（在演示中）时，我不得不修改 span 以更改为 textarea，不要判断我的 jquery！）

【讨论】：

不错。虽然我不太确定背景颜色。
谢谢！出于某种原因，我一直喜欢黄色。一定是老派！ :-)

【解决方案2】：

可编辑字段的 DOM 操作是一种糟糕的风格。您强制浏览器重新计算所有页面。

当用户与该字段交互时，有一种标准方法可以让浏览器更改可编辑字段的行为。它是 outline CSS 属性。轮廓不影响框或任何其他框的位置或大小。因此，显示或抑制轮廓不会导致回流或溢出。

那么为什么只使用 CSS 来显示用户可编辑的字段会更好呢？

用户已经习惯了如何领域看起来。他们会有严重的他们在斗争中遇到的困难一种奇怪形式的行为。
有标准的 html 元素文字编辑。为什么你需要发明新东西？是这样吗重要吗？
现代浏览器可以更改字段的独自出现。他们也可以使用系统元素、颜色等。

因此，如果您尝试向用户显示该字段是可编辑的，只需将其设为标准即可。

无论如何，您都可以添加自己的附加规则来更改字段的外观以符合网站设计。例如，我 used outline property with :hover and :focus pseudostates 并更改了默认背景。

并复制（仅限 CSS）：

.editor
{
    width: 80%;
    height: 100px;
}
.editor:hover
{
    outline: 1px solid #ffd700; 
}
.editor:focus
{
    outline: 1px solid #ffffe0; 
    background: #ffffe0;
}

【讨论】：