Jak używać symbolu zaznaczenia / znacznika wyboru (✓) zamiast punktorów na nieuporządkowanej liście?

85

Mam listę, na której chcę dodać symbol zaznaczenia przed tekstem listy. Czy istnieje CSS, który pomoże mi zastosować ten sposób?

✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text

Uwaga: chcę to w tym typie kodu HTML

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

Rozwiń fragment

css html special-characters

— Bohater przepełnienia stosu
źródło

150

Możesz użyć pseudoelementu, aby wstawić ten znak przed każdym elementem listy:

ul {
  list-style: none;
}

ul li:before {
  content: '✓';
}

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

Rozwiń fragment

— Josh Crozier
źródło

Użyłem tego i działa w Chrome 65. Byłem w stanie normalnie owinąć <li> za pomocą jednolitej ramki 1px, przesunąć lewy i prawy margines na ul li: wcześniej - możesz ustawić kolor obramowania na tło elementu.

— ymasood

Dzięki za rozwiązanie! Dodałem uwagę, że wcięcie jest tracone podczas owijania. (Przepraszamy za redagowanie posta, ale lepiej było zilustrować problem niż pozostawienie komentarza i miejmy nadzieję, że znajdziemy sposób, aby sobie z tym poradzić.)

— Dan Dascalescu

@Josh: Odpowiedź Adama ma rozwiązanie problemu pakowania. Zredagowałem to dla jasności, a Ty możesz to uwzględnić.

— Dan Dascalescu

35

Oto trzy różne style znaczników wyboru, których możesz użyć:

ul:first-child  li:before { content:"\2713\0020"; }  /* OR */
ul:nth-child(2) li:before { content:"\2714\0020"; }  /* OR */
ul:last-child   li:before { content:"\2611\0020"; }
ul { list-style-type: none; }

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

<ul><!-- not working on Stack snippet; check fiddle demo -->
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

Rozwiń fragment

jsFiddle

Bibliografia:

— Michael Benjamin
źródło

Nie różni się to od odpowiedzi Josha Croziera i cierpi na ten sam problem polegający na niszczeniu wgniecenia na opakowaniu . Ponadto ostatnia postać nie pojawia się na skrzypcach ani na Chromium / Ubuntu, ale i tak nie ma to znaczenia - odpowiedź Josha jest sednem rozwiązania. Jakie znaki wyboru należy użyć, to wybór projektu.

— Dan Dascalescu

1

@DanDascalescu, ta odpowiedź rozszerza rozwiązanie Josha Croziera, zapewniając opcje znaczników wyboru, o których niektórzy mogą nie wiedzieć. To cenne informacje. Fakt, że są to „wybory projektowe”, nie czyni tej odpowiedzi mniej użyteczną. Twój głos przeciw jest moim zdaniem nieuzasadniony, ponieważ: (1) odpowiedź była przydatna dla wielu osób (i ma prawie 30 głosów za), (2) odpowiedź nie udaje niczego innego niż wybór stylu, oraz (3) ja nie próbował rozwiązywać żadnych innych problemów (które, jak powiedziałeś, są „poza istotą”)

— Michael Benjamin

1

Wybrane znaczniki wyboru, które widzę, „\ 2713” i „\ 2714”, to surowe punkty kodowe Unicode. Nie widzę, jak wyglądają. Jeśli odpowiedź wymaga wyboru stylu, może zawierać pewne znaczniki wyboru: ✓, ✔, ☑, ✅. Jaki znacznik wyboru użyć, nie jest interesującym problemem. Jak używać znaczników wyboru. Postrzegam to jako: „Jak pomalować łódź, która jest obecnie na wodzie”, a „Jakie odcienie niebieskiego mogę ją pomalować”. Czy to ma sens?

— Dan Dascalescu

Masz prawo spojrzeć na tę odpowiedź z dowolnej perspektywy. Nie będę się kłócić z twoją opinią. Faktem jest jednak, że zdecydowana większość osób odwiedzających ten post uważa tę odpowiedź za przydatną. Po prostu zostawię to na tym. Dzięki za opinie. @DanDascalescu

— Michael Benjamin

2

Ludzie głosują za głosami z różnych powodów. Ludzie głosują za innymi z powodów innych niż twoje. Nie zgadzasz się z treścią tej odpowiedzi. Nie mówisz, że odpowiedź jest błędna lub nieaktualna (jak w linkach, do których się odnosisz), po prostu jej nie lubisz. Dla mnie w porządku. Masz prawo do swojej opinii.

— Michael Benjamin

25

Jako dodatek do rozwiązania:

ul li:before {
 content: '✓'; 
}

Możesz użyć dowolnej ikony SVG jako zawartości , takiej jak Font Aswesome .

ul {
  list-style: none;
  padding-left: 0;
}
li {
  position: relative;
  padding-left: 1.5em;  /* space to preserve indentation on wrap */
}
li:before {
  content: '';  /* placeholder for the SVG */
  position: absolute;
  left: 0;  /* place the SVG at the start of the padding */
  width: 1em;
  height: 1em;
  background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/></svg>") no-repeat;
}

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>This is my text, it's pretty long so it needs to wrap. Note that wrapping preserves the indentation that bullets had!</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

Rozwiń fragment

Uwaga: Aby rozwiązać problem zawijania, który miały inne odpowiedzi:

rezerwujemy 1,5 miliona przestrzeni po lewej stronie każdego z nich <li>
następnie umieść SVG na początku tego odstępu (position: absolute; left: 0 )

Tutaj jest więcej czarnych ikon Font Awesome .

Sprawdź ten CODEPEN, aby zobaczyć, jak możesz dodawać kolory i zmieniać ich rozmiar.

— Adam Orłow
źródło

8

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

możesz użyć tego prostego stylu CSS

ul {
     list-style-type: '\2713';
   }

— Hitendra Singh Shekhawat
źródło

Odpowiedź Adama dotyczyła problemu z zawijaniem, ale wymagało to mnóstwa dodatkowego kodu ... to po prostu działa. Odstępy były dla mnie akcentem, więc skończyło się na dodaniu dodatkowego \ 1 \ 1 na końcu, aby oddzielić znacznik wyboru od <li>.

— Jaden Baptista,