Hướng dẫn cross mark css code - mã css dấu chéo

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.

Hướng dẫn cross mark css code - mã css dấu chéo

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

Hướng dẫn cross mark css code - mã css dấu chéo

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 http://jsbin.com/keliguqi/1/

Hướng dẫn cross mark css code - mã css dấu chéo

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;
    }

Hướng dẫn cross mark css code - mã css dấu chéo

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

Hướng dẫn cross mark css code - mã css dấu chéo

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
9

Thí 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

Hướng dẫn cross mark css code - mã css dấu chéo

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. https://github.com/fontello/fontello http://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

Hướng dẫn cross mark css code - mã css dấu chéo

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;
}
4

Hoạ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

Hướng dẫn cross mark css code - mã css dấu chéo

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;
}
5

Xem tại đây: http://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;
}
6

Xem JS Fiddle: http://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;
}
7

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.Jul 9, 2014 at 12:54

Hướng dẫn cross mark css code - mã css dấu chéo

Đơ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

Hướng dẫn cross mark css code - mã css dấu chéo

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
0

CSS

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
1

CSS

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

Hướng dẫn cross mark css code - mã css dấu chéo

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 http://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
5
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
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