Question

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

如何设置“可编辑”的范围/文本的样式，以便用户明白它是否可以编辑？
如何以合理的方式从span / text转换为input元素（你会使用哪种css样式）？

由于

Answer 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，我希望这至少从造型的角度来看是有帮助的。纯粹是我的意见。

（编辑：顺便说一下，点击（在演示中）我不得不修改为一个textarea，不要判断我的jquery！）

Answer 2

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

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

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

用户已经习惯了领域看起来。他们会认真的与他们斗争的困难一种奇怪的形式的行为。
有标准的html元素文字编辑。你为什么需要发明一些新东西？是这样吗重要？
现代浏览器可以改变字段一个人的外表。他们也是可以使用系统元素，颜色等。

因此，如果您尝试向用户显示该字段是可编辑的，请将其标准化。

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

并且是dublicate（仅限CSS）：

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

用于内联编辑的CSS

2 个答案: