Question

我正在尝试使用一些图像替换我的子弹笔记的颜色。但是，我遇到了几个问题：

如果我按退格键删除其中一个项目符号，就会出现一条蓝线，这条蓝线显示出来 - 尝试退回我给出的小提琴链接中的所有内容，你会明白我的意思。通过使边框为0px可能有一个简单的解决方法，但我不确定正确的语法
主要问题是我希望它以某种方式编写，以便当用户按下回车键时，将显示下一个颜色项目符号或图像。我不希望它立即出现，但我不确定如何实现它。我假设有CSS课程或Javascript参与 - 我对这些语言不熟悉。

这是需要修复的整个代码的片段：

<body>
    <div contenteditable>
        <div id = "notes"
            <ul>
                <li style =  "list-style-image: url('http://i61.tinypic.com/2nb9jxs.png')">Click here to edit</li>
                <li style = "list-style-image: url('http://i58.tinypic.com/2m5xb1f.png')"> Click here </li>
                <li style = "list-style-image: url('http://i60.tinypic.com/2qb5342.png')"> Click here </li>
            </ul>
            <style>
                #notes { 
                    position: absolute;
            </style>
        </div>
    </div
</body

这里是fiddle.js链接：http://jsfiddle.net/95Wvv/ 如果你给小提琴解决方案也会很好。谢谢！

Answer 1

要修复第一部分，请将outline: 0;添加到其上有contenteditable的元素（http://jsfiddle.net/95Wvv/）

Answer 2

编辑

以符合OP要求

将您的contenteditable移至<ul>
将outline: 0添加到您的<li>

HTML：

<div>
    <div id="notes">       
        <ul contenteditable>
            <li style="list-style-image: url('http://i61.tinypic.com/2nb9jxs.png')">Click here to edit</li>
            <li style="list-style-image: url('http://i58.tinypic.com/2m5xb1f.png')"> Click here </li>
            <li style="list-style-image: url('http://i60.tinypic.com/2qb5342.png')"> Click here </li>
        </ul>
    </div>
</div>

CSS：

#notes { 
    position: absolute;
}
[contenteditable] {
    outline: none;
}

<强> Updated JSFiddle

修改

要替换颜色，请使用以下代码：

HTML

<div> <div id="notes"> <ul contenteditable> <li>Click here to edit</li> <li>Click here </li> <li>Click here </li> </ul> </div> </div>

CSS

#notes { position: absolute; } [contenteditable] { outline: none; } li { list-style-image: url('http://i61.tinypic.com/2nb9jxs.png'); } li:nth-child(3n+1) { list-style-image: url('http://i61.tinypic.com/2m5xb1f.png'); } li:nth-child(3n+2) { list-style-image: url('http://i61.tinypic.com/2qb5342.png'); }

Another JSFiddle !

用图像设计的交替子弹笔记

2 个答案: