CSSスタイルの編集可能なリスト？

Question

私は編集可能なリストを作ろうとしています。

は、私はそれは番号が付けられますが、追加のラベルが含まれていません。これまでのところ、私はこれを持って1,2,3,4,5,6,7,8,9,0,A,B,!,#

、とラベル付けされた順序付きリストになりたいです。 https://jsfiddle.net/cqeah9tx/

私がしようとしているのは、ユーザーが値をクリックして編集することができ、フィールドをクリックすると値がmysqlに書き戻される場合です。

私は、JQuery AJAXイベントでIDと値をPHPページに送信する予定です。

問題は10,11,12,13 & 14を0、A、B、とラベル付けする方法です。と＃？フィールドを編集可能にするにはどうすればよいですか？

アイデア？

Answer 1

HTMLとCSSだけでは、整数と文字を混在させることができますが、任意の記号を使用することはできません！と＃。 KLMN ...

3 4 5 6 7 8 9 10 2 1のような注文から保つために手紙を何に整数から変更するには、あなたのCSSで

使用list-style-typecounter（例えばli:before {content:counter(counter, upper-alpha)}）、および開始値（例えばli {counter-reset: counter 0}）とcounter-reset

ここではあなたが必要なスタイリングを示す最小限の作業の抜粋です：

ol { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    counter-reset: count 
 
} 
 
li { 
 
    counter-increment: count 
 
} 
 
li:before { 
 
    content: counter(count) 
 
} 
 
ol li:nth-child(10) { 
 
    counter-reset: count -1 
 
} 
 
ol li:nth-child(n+11):before { 
 
    content: counter(count, upper-alpha) 
 
} 
 
ol li:nth-child(13) { 
 
    counter-reset: count 0 
 
} 
 
ol li:nth-child(n+13):before { 
 
    content: counter(count, lower-greek) 
 
}

<ol> 
 
    <li>Decimal starts here</li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li>This is zero</li> 
 
    <li>Uppercase Latin starts here</li> 
 
    <li></li> 
 
    <li>Lowercase Greek starts here</li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ol>

私はあなたの任意の記号の代わりにギリシャ語を使用しました。今後、提案されたsymbols() CSS機能（list-style: symbols(cyclic "!" "#" "$")のようなもの）を使用することができます。

かにli値を変換し、各<li>にカスタムdata-属性を追加するカスタム関数を記述the supported list-style-typesに

• スティック（リンクをチェックアウトし、たくさんあります）：今のところ2つのオプションがありますカスタムマーカを作成し、その値をli:beforeのcontentに入力します。驚いたことに@Blenderは、すでにこの回答でそのスクリプトを書いた：https://stackoverflow.com/a/12082088/1241736

Answer 2

は、以上のことを行う必要性を全く入力フィールドを使用します:)

$('ol.rectangle-list a').click(function(e) { 
 
\t \t e.preventDefault(); 
 
    $(this).find('input').select(); 
 
}); 
 

 
$('ol.rectangle-list input').blur(function(e) { 
 
    //$(this).attr('readonly', true); 
 
    console.log('MAKE AJAX REQUEST'); 
 
    console.log($(this).val()); 
 
});

body{ 
 
\t \t \t \t margin: 40px auto; 
 
\t \t \t \t width: 500px; 
 
\t \t \t } 
 

 
\t \t \t /* -------------------------------------- */ 
 

 
\t \t \t ol{ 
 
\t \t \t \t counter-reset: li; 
 
\t \t \t \t list-style: none; 
 
\t \t \t \t *list-style: decimal; 
 
\t \t \t \t padding: 0; 
 
\t \t \t \t margin-bottom: 4em; 
 
\t \t \t \t text-shadow: 0 1px 0 rgba(255,255,255,.5); 
 
\t \t \t } 
 

 
\t \t \t ol ol{ 
 
\t \t \t \t margin: 0 0 0 2em; 
 
\t \t \t } 
 

 
\t \t \t /* -------------------------------------- */ 
 

 
\t \t \t .rectangle-list a{ 
 
\t \t \t font: 15px 'trebuchet MS', 'lucida sans'; 
 
     color: #444; 
 
\t \t \t \t position: relative; 
 
\t \t \t \t display: block; 
 
\t \t \t \t padding: .4em .4em .4em .8em; 
 
\t \t \t \t *padding: .4em; 
 
\t \t \t \t margin: .5em 0 .5em 2.5em; 
 
\t \t \t \t background: #ddd; 
 
\t \t \t \t text-decoration: none; 
 
\t \t \t \t -webkit-transition: all .3s ease-out; 
 
\t \t \t \t -moz-transition: all .3s ease-out; 
 
\t \t \t \t -ms-transition: all .3s ease-out; 
 
\t \t \t \t -o-transition: all .3s ease-out; 
 
\t \t \t \t transition: all .3s ease-out; \t 
 
\t \t \t } 
 

 
\t \t \t .rectangle-list a:hover{ 
 
\t \t \t \t background: #eee; 
 
\t \t \t } \t 
 

 
\t \t \t .rectangle-list a:before{ 
 
\t \t \t \t content: counter(li); 
 
\t \t \t \t counter-increment: li; 
 
\t \t \t \t position: absolute; \t 
 
\t \t \t \t left: -2.5em; 
 
\t \t \t \t top: 50%; 
 
\t \t \t \t margin-top: -1em; 
 
\t \t \t \t background: #fa8072; 
 
\t \t \t \t height: 2em; 
 
\t \t \t \t width: 2em; 
 
\t \t \t \t line-height: 2em; 
 
\t \t \t \t text-align: center; 
 
\t \t \t \t font-weight: bold; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t .rectangle-list a:after{ 
 
\t \t \t \t position: absolute; \t 
 
\t \t \t \t content: ''; 
 
\t \t \t \t border: .5em solid transparent; 
 
\t \t \t \t left: -1em; 
 
\t \t \t \t top: 50%; 
 
\t \t \t \t margin-top: -.5em; 
 
\t \t \t \t -webkit-transition: all .3s ease-out; 
 
\t \t \t \t -moz-transition: all .3s ease-out; 
 
\t \t \t \t -ms-transition: all .3s ease-out; 
 
\t \t \t \t -o-transition: all .3s ease-out; 
 
\t \t \t \t transition: all .3s ease-out; \t \t \t \t 
 
\t \t \t } 
 

 
\t \t \t .rectangle-list a:hover:after{ 
 
\t \t \t \t left: -.5em; 
 
\t \t \t \t border-left-color: #fa8072; \t \t \t \t 
 
\t \t \t } 
 
     
 
     .rectangle-list input{ 
 
     border: none; 
 
     font: 15px 'trebuchet MS', 'lucida sans'; 
 
     color: #444; 
 
     background: transparent; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ol class="rectangle-list"> 
 
\t <li><a href="#"><input type="text" value="List item"></a></li> 
 
\t <li><a href="#"><input type="text" value="List item"></a></li> 
 
\t <li><a href="#"><input type="text" value="List item"></a></li> 
 
\t <li><a href="#"><input type="text" value="List item"></a></li> 
 
\t <li><a href="#"><input type="text" value="List item"></a></li> 
 
\t <li><a href="#"><input type="text" value="List item"></a></li> \t \t \t 
 
\t <li><a href="#"><input type="text" value="List item"></a></li> \t \t \t 
 
\t <li><a href="#"><input type="text" value="List item"></a></li> \t \t \t 
 
\t <li><a href="#"><input type="text" value="List item"></a></li> \t \t \t 
 
\t <li><a href="#"><input type="text" value="List item"></a></li> \t \t \t 
 
\t <li><a href="#"><input type="text" value="List item"></a></li> \t \t \t 
 
\t <li><a href="#"><input type="text" value="List item"></a></li> \t \t \t 
 
\t <li><a href="#"><input type="text" value="List item"></a></li> \t \t \t 
 
\t <li><a href="#"><input type="text" value="List item"></a></li> \t \t \t 
 
</ol>