88
Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.
Làm thế nào để vẽ ký hiệu đánh dấu bằng CSS? Các biểu tượng tôi tìm thấy bằng cách sử dụng Unicode không phải là thẩm mỹ.draw the tick symbol using CSS? The symbols I find using Unicode isn't aesthetically-pleasing.
Chỉnh sửa phông chữ biểu tượng là một gợi ý tuyệt vời. Tôi đang tìm kiếm một cái gì đó như thế này. Icon fonts are a great suggestion. I was looking for something like this.
jbutler483
23.4K9 Huy hiệu vàng87 Huy hiệu bạc141 Huy hiệu đồng9 gold badges87 silver badges141 bronze badges
Đã hỏi ngày 23 tháng 2 năm 2014 lúc 12:59Feb 23, 2014 at 12:59
5
Bạn có thể vẽ hai hình chữ nhật và đặt chúng cạnh nhau. Và sau đó xoay 45 độ. Sửa đổi các tham số chiều rộng/chiều cao/đỉnh/trái cho bất kỳ biến thể nào.
Bản demo 1
Demo 2 [với vòng tròn]
HTML
CSS
.checkmark {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate[45deg]; /* IE 9 */
-webkit-transform: rotate[45deg]; /* Chrome, Safari, Opera */
transform: rotate[45deg];
}
.checkmark_stem {
position: absolute;
width:3px;
height:9px;
background-color:#ccc;
left:11px;
top:6px;
}
.checkmark_kick {
position: absolute;
width:3px;
height:3px;
background-color:#ccc;
left:8px;
top:12px;
}
Đã trả lời ngày 23 tháng 2 năm 2014 lúc 12:59Feb 23, 2014 at 12:59
dayulolidayulolidayuloli
15.4K15 Huy hiệu vàng65 Huy hiệu bạc116 Huy hiệu đồng15 gold badges65 silver badges116 bronze badges
5
Đây là một giải pháp CSS khác. nó có ít dòng mã hơn.
ul li:before
{
content: '\2713';
display: inline-block;
color: red;
padding: 0 6px 0 0;
}
ul li
{
list-style-type: none;
font-size: 1em;
}
- test1
- test
Đây là liên kết demo //jsbin.com/keliguqi/1/
Pikamander2
6.4533 huy hiệu vàng43 Huy hiệu bạc64 Huy hiệu đồng3 gold badges43 silver badges64 bronze badges
Đã trả lời ngày 23 tháng 2 năm 2014 lúc 13:12Feb 23, 2014 at 13:12
Kheema Pandeykheema PandeyKheema Pandey
9.7994 Huy hiệu vàng24 Huy hiệu bạc26 Huy hiệu đồng4 gold badges24 silver badges26 bronze badges
2
Thực hiện một số biến đổi với chữ L
.checkmark {
font-family: arial;
-ms-transform: scaleX[-1] rotate[-35deg]; /* IE 9 */
-webkit-transform: scaleX[-1] rotate[-35deg]; /* Chrome, Safari, Opera */
transform: scaleX[-1] rotate[-35deg];
}
L
Đã trả lời ngày 18 tháng 3 năm 2015 lúc 12:15Mar 18, 2015 at 12:15
HenryhenryHenry
9811 Huy hiệu vàng13 Huy hiệu bạc14 Huy hiệu đồng1 gold badge13 silver badges14 bronze badges
2
Chỉ CSS, khá đơn giản, tôi tìm thấy nó:
.checkmark {
display: inline-block;
transform: rotate[45deg];
height: 25px;
width: 12px;
margin-left: 60%;
border-bottom: 7px solid #78b13f;
border-right: 7px solid #78b13f;
}
Habib
1.09313 Huy hiệu bạc27 Huy hiệu đồng13 silver badges27 bronze badges
Đã trả lời ngày 20 tháng 2 năm 2020 lúc 14:29Feb 20, 2020 at 14:29
PetronellapetronellaPetronella
2.1701 Huy hiệu vàng13 Huy hiệu bạc23 Huy hiệu đồng1 gold badge13 silver badges23 bronze badges
0
Một giải pháp bổ sung, cho khi bạn chỉ có một trong những: trước /: sau các yếu tố psuedo có sẵn, được mô tả ở đây :: Hộp sau khi kiểm tra sử dụng Biên giới
Về cơ bản, nó sử dụng các thuộc tính
ul li:before
{
content: '\2713';
display: inline-block;
color: red;
padding: 0 6px 0 0;
}
ul li
{
list-style-type: none;
font-size: 1em;
}
- test1
- test
7 và ul li:before
{
content: '\2713';
display: inline-block;
color: red;
padding: 0 6px 0 0;
}
ul li
{
list-style-type: none;
font-size: 1em;
}
- test1
- test
8 để tạo hộp kiểm và sau đó xoay l nhân đôi bằng cách sử dụng ul li:before
{
content: '\2713';
display: inline-block;
color: red;
padding: 0 6px 0 0;
}
ul li
{
list-style-type: none;
font-size: 1em;
}
- test1
- test
9Thí dụ
li {
position: relative; /* necessary for positioning the :after */
}
li.done {
list-style: none; /* remove normal bullet for done items */
}
li.done:after {
content: "";
background-color: transparent;
/* position the checkbox */
position: absolute;
left: -16px;
top: 0px;
/* setting the checkbox */
/* short arm */
width: 5px;
border-bottom: 3px solid #4D7C2A;
/* long arm */
height: 11px;
border-right: 3px solid #4D7C2A;
/* rotate the mirrored L to make it a checkbox */
transform: rotate[45deg];
-o-transform: rotate[45deg];
-ms-transform: rotate[45deg];
-webkit-transform: rotate[45deg];
}
To do:
- Great stuff
- Easy stuff
- Difficult stuff
Đã trả lời ngày 28 tháng 2 năm 2015 lúc 2:06Feb 28, 2015 at 2:06
PhilippePhilip
2.8162 huy hiệu vàng20 Huy hiệu bạc36 Huy hiệu đồng2 gold badges20 silver badges36 bronze badges
5
Bây giờ bạn có thể bao gồm các phông chữ web và thậm chí thu hẹp kích thước tệp chỉ với các glyphs bạn cần. //github.com/fontello/fontello //fontello.com/
li:before {
content:'[add icon symbol here]';
font-family: [my cool web icon font here];
display:inline-block;
vertical-align: top;
line-height: 1em;
width: 1em;
height:1em;
margin-right: 0.3em;
text-align: center;
color: #999;
}
Đã trả lời ngày 23 tháng 2 năm 2014 lúc 14:18Feb 23, 2014 at 14:18
JohanvdrjohanvdrJohanVdR
2.8281 Huy hiệu vàng12 Huy hiệu bạc15 Huy hiệu đồng1 gold badge12 silver badges15 bronze badges
Tôi đã sử dụng một cái gì đó tương tự như câu trả lời của BM2ILABS trong quá khứ để tạo kiểu đánh dấu trong các hộp kiểm. Kỹ thuật này chỉ sử dụng một phần tử giả duy nhất để nó bảo tồn HTML ngữ nghĩa và không có lý do gì cho các phần tử HTML bổ sung.
Đơn giản, ngữ nghĩa, không có bất kỳ phụ thuộc hoặc HTML bổ sung.
.checkmark {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate[45deg]; /* IE 9 */
-webkit-transform: rotate[45deg]; /* Chrome, Safari, Opera */
transform: rotate[45deg];
}
.checkmark_stem {
position: absolute;
width:3px;
height:9px;
background-color:#ccc;
left:11px;
top:6px;
}
.checkmark_kick {
position: absolute;
width:3px;
height:3px;
background-color:#ccc;
left:8px;
top:12px;
}
0.checkmark {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate[45deg]; /* IE 9 */
-webkit-transform: rotate[45deg]; /* Chrome, Safari, Opera */
transform: rotate[45deg];
}
.checkmark_stem {
position: absolute;
width:3px;
height:9px;
background-color:#ccc;
left:11px;
top:6px;
}
.checkmark_kick {
position: absolute;
width:3px;
height:3px;
background-color:#ccc;
left:8px;
top:12px;
}
1Đã trả lời ngày 6 tháng 1 năm 2020 lúc 13:14Jan 6, 2020 at 13:14
Matthewdmatthewdmatthewd
3034 Huy hiệu bạc9 Huy hiệu Đồng4 silver badges9 bronze badges
1
Hãy thử ví dụ // HTML này
.checkmark {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate[45deg]; /* IE 9 */
-webkit-transform: rotate[45deg]; /* Chrome, Safari, Opera */
transform: rotate[45deg];
}
.checkmark_stem {
position: absolute;
width:3px;
height:9px;
background-color:#ccc;
left:11px;
top:6px;
}
.checkmark_kick {
position: absolute;
width:3px;
height:3px;
background-color:#ccc;
left:8px;
top:12px;
}
2// Ví dụ CSS
.checkmark {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate[45deg]; /* IE 9 */
-webkit-transform: rotate[45deg]; /* Chrome, Safari, Opera */
transform: rotate[45deg];
}
.checkmark_stem {
position: absolute;
width:3px;
height:9px;
background-color:#ccc;
left:11px;
top:6px;
}
.checkmark_kick {
position: absolute;
width:3px;
height:3px;
background-color:#ccc;
left:8px;
top:12px;
}
3Đã trả lời ngày 7 tháng 5 năm 2019 lúc 6:26May 7, 2019 at 6:26
Silvedosilvedosilvedo
1211 Huy hiệu bạc3 Huy hiệu đồng1 silver badge3 bronze badges
1
Tôi thích cách này vì bạn không cần tạo hai thành phần chỉ một.
.checkmark {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate[45deg]; /* IE 9 */
-webkit-transform: rotate[45deg]; /* Chrome, Safari, Opera */
transform: rotate[45deg];
}
.checkmark_stem {
position: absolute;
width:3px;
height:9px;
background-color:#ccc;
left:11px;
top:6px;
}
.checkmark_kick {
position: absolute;
width:3px;
height:3px;
background-color:#ccc;
left:8px;
top:12px;
}
4Hoạt hình từ bút Scott Galloway
Đã trả lời ngày 14 tháng 3 năm 2018 lúc 11:43Mar 14, 2018 at 11:43
BM2ilabsBM2ilabsBM2ilabs
4226 Huy hiệu bạc9 Huy hiệu Đồng6 silver badges9 bronze badges
Tôi đề nghị sử dụng một biểu tượng đánh dấu không vẽ nó. Hoặc sử dụng các webfonts miễn phí chẳng hạn: fontello [dot] com bạn có thể thay thế biểu tượng đánh dấu bằng một font glyph.
Danh sách
.checkmark {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate[45deg]; /* IE 9 */
-webkit-transform: rotate[45deg]; /* Chrome, Safari, Opera */
transform: rotate[45deg];
}
.checkmark_stem {
position: absolute;
width:3px;
height:9px;
background-color:#ccc;
left:11px;
top:6px;
}
.checkmark_kick {
position: absolute;
width:3px;
height:3px;
background-color:#ccc;
left:8px;
top:12px;
}
5Xem tại đây: //jsfiddle.net/hpmw7/3/
Hộp kiểm
Bạn thậm chí còn có các phông chữ web với biểu tượng đánh dấu glyphs và hình ảnh động CSS 3. Đối với IE8, bạn sẽ cần áp dụng một polyfill vì nó không hiểu: đã kiểm tra.
.checkmark {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate[45deg]; /* IE 9 */
-webkit-transform: rotate[45deg]; /* Chrome, Safari, Opera */
transform: rotate[45deg];
}
.checkmark_stem {
position: absolute;
width:3px;
height:9px;
background-color:#ccc;
left:11px;
top:6px;
}
.checkmark_kick {
position: absolute;
width:3px;
height:3px;
background-color:#ccc;
left:8px;
top:12px;
}
6Xem JS Fiddle: //jsfiddle.net/vzvfe/37
Đã trả lời ngày 23 tháng 2 năm 2014 lúc 13:55Feb 23, 2014 at 13:55
JohanvdrjohanvdrJohanVdR
2.8281 Huy hiệu vàng12 Huy hiệu bạc15 Huy hiệu đồng1 gold badge12 silver badges15 bronze badges
.checkmark {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate[45deg]; /* IE 9 */
-webkit-transform: rotate[45deg]; /* Chrome, Safari, Opera */
transform: rotate[45deg];
}
.checkmark_stem {
position: absolute;
width:3px;
height:9px;
background-color:#ccc;
left:11px;
top:6px;
}
.checkmark_kick {
position: absolute;
width:3px;
height:3px;
background-color:#ccc;
left:8px;
top:12px;
}
7Tôi đã sử dụng một cái gì đó tương tự như câu trả lời của BM2ILABS trong quá khứ để tạo kiểu đánh dấu trong các hộp kiểm. Kỹ thuật này chỉ sử dụng một phần tử giả duy nhất để nó bảo tồn HTML ngữ nghĩa và không có lý do gì cho các phần tử HTML bổ sung.Jul 9, 2014 at 12:54
Đơn giản, ngữ nghĩa, không có bất kỳ phụ thuộc hoặc HTML bổ sung.
.checkmark {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate[45deg]; /* IE 9 */
-webkit-transform: rotate[45deg]; /* Chrome, Safari, Opera */
transform: rotate[45deg];
}
.checkmark_stem {
position: absolute;
width:3px;
height:9px;
background-color:#ccc;
left:11px;
top:6px;
}
.checkmark_kick {
position: absolute;
width:3px;
height:3px;
background-color:#ccc;
left:8px;
top:12px;
}
8.checkmark {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate[45deg]; /* IE 9 */
-webkit-transform: rotate[45deg]; /* Chrome, Safari, Opera */
transform: rotate[45deg];
}
.checkmark_stem {
position: absolute;
width:3px;
height:9px;
background-color:#ccc;
left:11px;
top:6px;
}
.checkmark_kick {
position: absolute;
width:3px;
height:3px;
background-color:#ccc;
left:8px;
top:12px;
}
9Đã trả lời ngày 6 tháng 1 năm 2020 lúc 13:14Feb 19, 2021 at 13:26
MatthewdmatthewdGameChanger
3034 Huy hiệu bạc9 Huy hiệu Đồng4 silver badges15 bronze badges
Hãy thử ví dụ // HTML này
// Ví dụ CSS
Đã trả lời ngày 7 tháng 5 năm 2019 lúc 6:26Apr 29, 2017 at 13:37
Silvedosilvedo
1211 Huy hiệu bạc3 Huy hiệu đồng
Tôi thích cách này vì bạn không cần tạo hai thành phần chỉ một.
Hoạt hình từ bút Scott GallowayAug 22, 2020 at 8:15
Đã trả lời ngày 14 tháng 3 năm 2018 lúc 11:43sidoco
4226 Huy hiệu bạc9 Huy hiệu Đồng10 bronze badges
Tôi đề nghị sử dụng một biểu tượng đánh dấu không vẽ nó. Hoặc sử dụng các webfonts miễn phí chẳng hạn: fontello [dot] com bạn có thể thay thế biểu tượng đánh dấu bằng một font glyph.
HTML
ul li:before
{
content: '\2713';
display: inline-block;
color: red;
padding: 0 6px 0 0;
}
ul li
{
list-style-type: none;
font-size: 1em;
}
- test1
- test
0CSS
ul li:before
{
content: '\2713';
display: inline-block;
color: red;
padding: 0 6px 0 0;
}
ul li
{
list-style-type: none;
font-size: 1em;
}
- test1
- test
1CSS
ul li:before
{
content: '\2713';
display: inline-block;
color: red;
padding: 0 6px 0 0;
}
ul li
{
list-style-type: none;
font-size: 1em;
}
- test1
- test
2
Đã trả lời ngày 23 tháng 2 năm 2014 lúc 12:59Mar 18, 2021 at 0:38
1000Gbps1000Gbps1000Gbps
dayulolidayuloli1 gold badge30 silver badges33 bronze badges
15.4K15 Huy hiệu vàng65 Huy hiệu bạc116 Huy hiệu đồng
ul li:before
{
content: '\2713';
display: inline-block;
color: red;
padding: 0 6px 0 0;
}
ul li
{
list-style-type: none;
font-size: 1em;
}
- test1
- test
3Đây là một giải pháp CSS khác. nó có ít dòng mã hơn.
ul li:before
{
content: '\2713';
display: inline-block;
color: red;
padding: 0 6px 0 0;
}
ul li
{
list-style-type: none;
font-size: 1em;
}
- test1
- test
4Đây là liên kết demo //jsbin.com/keliguqi/1/Apr 11 at 12:18
6.4533 huy hiệu vàng43 Huy hiệu bạc64 Huy hiệu đồngtick, you probably also want a cross, with background colours.
ul li:before
{
content: '\2713';
display: inline-block;
color: red;
padding: 0 6px 0 0;
}
ul li
{
list-style-type: none;
font-size: 1em;
}
- test1
- test
5ul li:before
{
content: '\2713';
display: inline-block;
color: red;
padding: 0 6px 0 0;
}
ul li
{
list-style-type: none;
font-size: 1em;
}
- test1
- test
6Đã trả lời ngày 23 tháng 2 năm 2014 lúc 13:12Jun 28 at 12:03
Kheema Pandeykheema Pandeylonix
9.7994 Huy hiệu vàng24 Huy hiệu bạc26 Huy hiệu đồng12 gold badges62 silver badges124 bronze badges
Đây là CSS đơn giản cho dấu hiệu.
ul li: sau {opacity: 1; nội dung: '\ 2713'; đúng: 20px; vị trí: tuyệt đối; kích thước phông chữ: 20px; font-weight: in đậm;}
Đã trả lời ngày 22 tháng 9 năm 2019 lúc 5:13Sep 22, 2019 at 5:13
1