Demand background

Currently doing the shopping cart list in the mini program mall, encountered selected and unselected styles. This style can be easily implemented with a background image, but the applet’s background image must be either a network image (which can be uploaded to a server) or a Base64 image. Because I don’t want to be restricted, and to facilitate subsequent changes, I want to try out the CSS implementation.

Before and after selectors

Implementation approach

  1. Unselected: The gray circle is covered by two circles to achieve the effect.
  2. When selected: Add class, change the outer ring background color; Add an internal check.

The core code

A small circle

The easiest way to implement a ring is to use nested tags, which can be achieved by setting border-RADIUS. In order to simplify the structure of the page, I implemented it directly with pseudo-class elements.

<view class="checkbox">
</view>
.checkbox {
     width: 16px;
     height: 16px;
     background-color: #d8d8d8;
     border-radius: 50%;
 }
.checkbox::before{
   content: "";
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background-color: #fff;
   position: relative;
   top: 1px;
   left: 1px;
 }

Copy the code

To tick tick

  1. Draw a rectangle with a box;
  2. Set the top border and the right border to zero to get an L-shaped shape.
  3. I rotate it by minus 60 degrees, and I’m done.
.checkbox.checked { width: 16px; height: 16px; background-color: #2fd2fe; border-radius: 50%; position: relative; } .checkbox.checked::after { content: ""; display: block; width: 6px; height: 4px; border: 1px solid #2fd2fe; border-right: none; border-top: none; transform: rotate(-60deg) translate(7px, -10px); position: absolute; top: 16px; Left: 8.5 px; }Copy the code

Ps: Using the background image, it looks simpler. Go directly to the code so that the viewer can take it and use it.

.checkbox {
   height: 40rpx;
   line-height: 40rpx;
   background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/checkbox-0e09baa37e.png) no-repeat;
   background-size: 34rpx;
 }
 .checkbox.checked {
   background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/checkbox-checked-822e54472a.png) no-repeat;
   background-size: 34rpx;
 }
Copy the code

conclusion

There are many ways to achieve this effect, and I won’t go into them here. The hook dynamic effects will also be updated in the subsequent articles, please continue to pay attention to. It is not easy to be original, please take care of it, and click “like” before you go