Поставьте флажок в поле ввода флажка в поле флажка

Я хотел бы установить значение моего флажка внутри самого флажка вместо того, чтобы быть в стороне от флажка.Поставьте флажок в поле ввода флажка в поле флажка

Я думаю, что это может дать общий более приятный визуальный, чем простой текст рядом с флажком.

Я могу использовать jQuery 1.3.2 для этого сайта (ограничение SaaS), так что просто голова.

Вот текущая макет флажка. Я хотел бы, чтобы поместить значения внутри флажков

Picture #1

И это то, что я хотел бы, чтобы это выглядело как:

Picture #2

Итак, что мне интересно, , как я могу это сделать, и это с помощью CSS или JS? Или сочетание обоих?

Мой текущий HTML выглядит следующим образом:

<ul class="linkList" id="binValue-6"><li class="binValue"> 
<input name="binId" value="size_name" type="hidden"> <input name="binValue" value="10" type="hidden">  <a href=".com/b/5819597011?field_size_name=10&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox"> 
10 
</a> 
</li> 
<li class="binValue"> 
<input name="binId" value="size_name" type="hidden"> <input name="binValue" value="12" type="hidden">  <a href=".com/b/5819597011?field_size_name=12&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox"> 
12 
</a> 
</li> 
<li class="binValue"> 
<input name="binId" value="size_name" type="hidden"> <input name="binValue" value="12M" type="hidden">  <a href=".com/b/5819597011?field_size_name=12M&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox"> 
12M 
</a> 
</li> 
<li class="binValue"> 
<input name="binId" value="size_name" type="hidden"> <input name="binValue" value="14" type="hidden">  <a href=".com/b/5819597011?field_size_name=14&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox"> 
14 
</a> 
</li> 
<li class="binValue"> 
<input name="binId" value="size_name" type="hidden"> <input name="binValue" value="16" type="hidden">  <a href=".com/b/5819597011?field_size_name=16&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox"> 
16 
</a> 
</li> 
<li class="binValue"> 
<input name="binId" value="size_name" type="hidden"> <input name="binValue" value="18M" type="hidden">  <a href=".com/b/5819597011?field_size_name=18M&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox"> 
18M 
</a> 
</li> 
<li class="binValue"> 
<input name="binId" value="size_name" type="hidden"> <input name="binValue" value="24" type="hidden">  <a href=".com/b/5819597011?field_size_name=24&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox"> 
24 
</a> 
</li> 
<li class="binValue"> 
<input name="binId" value="size_name" type="hidden"> <input name="binValue" value="24M" type="hidden">  <a href=".com/b/5819597011?field_size_name=24M&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox"> 
24M 
</a> 
</li> 
<li class="binValue"> 
<input name="binId" value="size_name" type="hidden"> <input name="binValue" value="2T" type="hidden">  <a href=".com/b/5819597011?field_size_name=2T&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox"> 
2T 
</a> 
</li> 
<li class="binValue"> 
<input name="binId" value="size_name" type="hidden"> <input name="binValue" value="3T" type="hidden">  <a href=".com/b/5819597011?field_size_name=3T&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox"> 
3T 
</a> 
</li> 
<li class="binValue"> 
<input name="binId" value="size_name" type="hidden"> <input name="binValue" value="4" type="hidden">  <a href=".com/b/5819597011?field_size_name=4&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox"> 
4 
</a> 
</li> 
<li class="binValue"> 
<input name="binId" value="size_name" type="hidden"> <input name="binValue" value="4T" type="hidden">  <a href=".com/b/5819597011?field_size_name=4T&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox"> 
4T 
</a> 
</li> 
<li class="binValue"> 
<input name="binId" value="size_name" type="hidden"> <input name="binValue" value="5" type="hidden">  <a href=".com/b/5819597011?field_size_name=5&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox"> 
5 
</a> 
</li> 
<li class="binValue"> 
<input name="binId" value="size_name" type="hidden"> <input name="binValue" value="6" type="hidden">  <a href=".com/b/5819597011?field_size_name=6&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox"> 
6 
</a> 
</li> 
<li class="binValue"> 
<input name="binId" value="size_name" type="hidden"> <input name="binValue" value="6X" type="hidden">  <a href=".com/b/5819597011?field_size_name=6X&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox"> 
6X 
</a> 
</li> 
<li class="binValue"> 
<input name="binId" value="size_name" type="hidden"> <input name="binValue" value="7" type="hidden">  <a href=".com/b/5819597011?field_size_name=7&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox"> 
7 
</a> 
</li> 
<li class="binValue"> 
<input name="binId" value="size_name" type="hidden"> <input name="binValue" value="8" type="hidden">  <a href=".com/b/5819597011?field_size_name=8&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox"> 
8 
</a> 
</li> 
<li class="binValue"> 
<input name="binId" value="size_name" type="hidden"> <input name="binValue" value="9M" type="hidden">  <a href=".com/b/5819597011?field_size_name=9M&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox"> 
9M 
</a> 
</li> 
<li class="binValue"> 
<input name="binId" value="size_name" type="hidden"> <input name="binValue" value="One Size" type="hidden">  <a href=".com/b/5819597011?field_size_name=One+Size&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox"> 
One Size 
</a> 
</li> 
</ul>

источник

2014-09-05 janderson133787

Вы имеете в виду, когда вы нажимаете флажок? И значение это текст, рядом с флажком? –

Я хотел бы сделать это http://i.imgur.com/DksAwlU.png следующим образом: http://i.imgur.com/n3UQjNX.png – janderson133787

Из ваших изображений - это кнопки с текстом, а не флажки – Justinas

Ниже CSS должен поставить вас прямо отслеживать

.cb-toolbar input[type="checkbox"] { 
    display:none; 
} 

.cb-toolbar label { 
    display:inline-block; 
    background-color:#ddd; 
    padding:4px 11px; 
    font-family:Arial; 
    font-size:16px; 
} 

.cb-toolbar input[type="checkbox"]:checked + label { 
    background-color:#bbb; 
}

Вот HTML разметки.

<div class="cb-toolbar"> 
    <input type="checkbox" id="checkbox1" name="radios" value="all" checked> 
    <label for="checkbox1">10</label> 

    <input type="checkbox" id="checkbox2" name="radios"value="false"> 
    <label for="checkbox2">12</label> 

    <input type="checkbox" id="checkbox3" name="radios" value="true"> 
    <label for="checkbox3">12M</label> 
</div>

Live Demo with JSFIDDLE

источник

2014-09-05 14:34:57 doforumda

@ janderson133787 Примите этот ответ, если он ответит на ваш вопрос. – doforumda

Я согласен с @doforumda – Allan

Поставьте флажок в поле ввода флажка в поле флажка

ответ

Смежные вопросы