/    Sign up×
Community /Pin to ProfileBookmark

Unordered List with Checked Box as Graphic

Copy linkTweet thisAlerts:
Feb 21.2017

Hi,

Beginner developer with How To Question for my own site, which is for my business. I am using a CMS (Joomla) but just need some help with CSS selector/declaration for Unordered Lists. This going to be challenging without being able to attach a graphic but..

I have had someone create a mock-up of the site and as part of that there are Unorderer List but instead of a bullet point there are are ‘check[B]ed[/B] boxes’ like a ‘tick mark’, if that makes sense. The person who did the mock-up assured me it was possible with CSS, without using a graphic, but couldn’t supply me any sample code [sigh]

Actually I just noticed that while writing this there is an example of what I am after in ‘Post Icons’, its the ‘Resolved’ one above ‘No Icon’

Any guidance would be greatly appreciated it. Googling on checkbox and CSS just gets me code for Input, which is not what I want.

Thanks to all,
Steve

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@Kevin2Feb 22.2017 — Example code for a few options:

[code=html]<!doctype html>
<title>UL "checkboxes"</title>
<style>
ul {list-style: none;}
li:before {
font-weight: bold;
padding-right: 8px;
}
.box li:before {
content: '25A1';
font-size: 150%;
}
.dotbox li:before {content: '22A1';}
.xbox li:before {content: '22A0';}
.check li:before {
content: '2713';
color: green;
}
.image {list-style-image: url(http://www.webdeveloper.com/forum/images/icons/resolved.gif);} /* Don't use this image; find or make your own. */
</style>

<ul class="box">
<li>a</li>
<li>list</li>
<li>with</li>
<li>box</li>
</ul>

<ul class="dotbox">
<li>list</li>
<li>with</li>
<li>dotted</li>
<li>box</li>
</ul>

<ul class="xbox">
<li>list</li>
<li>with</li>
<li>Xed</li>
<li>box</li>
</ul>

<ul class="check">
<li>list</li>
<li>with</li>
<li>a</li>
<li>checkmark</li>
</ul>

<ul class="image">
<li>list</li>
<li>with</li>
<li>an</li>
<li>image</li>
</ul>[/code]
Copy linkTweet thisAlerts:
@spdwebdevauthorFeb 22.2017 — Heya Kevin2,

That is great help, thanks very much for your time!

Can I just ask a follow-up question to further show my ignorance - whats is '22A1' and is there somewhere I can get a list of them. Googling on it didn't get me any results.

Thanks again

Steve
Copy linkTweet thisAlerts:
@Douglas_WilliamFeb 22.2017 — ... whats is '22A1' and is there somewhere I can get a list of them. ...

Thanks again

Steve[/QUOTE]
Hi spdwebdev,

I did a [i]search[/i] using the credentials " content: '22A1'; " and this [i]search[/i] provided a [i]w3schools[/i] Hexadecimal listing that contains "[url=https://www.w3schools.com/charsets/ref_html_entities_s.asp]022A1[/url]" ([i]sdotb[/i]) of HTML Entities.

- Douglas
Copy linkTweet thisAlerts:
@spdwebdevauthorFeb 22.2017 — Thanks for that Douglas, very helpful. I had only put in the code.

Great site here, will definitely visit here often!

Cheers

Steve
Copy linkTweet thisAlerts:
@Kevin2Feb 22.2017 — Some of my vast ignorance is showing here but I believe that code is called a "Unicode hex escape". Where to find them:

https://dev.w3.org/html5/html-author/charref

Look through the page to find something you like and want to use. Hover over it and something similar to the following will appear:
&amp;squ; &amp;square; &amp;Square;
&amp;#x025A1;
&amp;#9633;

The code beginning with [b]&#x[/b] is what you need in CSS. Replace the [b]&#x[/b] with a [b][/b], delete the semi-colon and away you go.



However, if you save (or convert) your files with a UTF-8 character encoding you can just copy/paste the actual character into the CSS. Using the checkmark from my example code:

.check li:before {
content: '&amp;#10003;';
color: green;
}
Copy linkTweet thisAlerts:
@spdwebdevauthorFeb 23.2017 — Thanks again Kevin2 , great stuff!

Steve
×

Success!

Help @spdwebdev spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...