css實現對item選中時打勾和角標操作

2022-07-10 09:27:10 字數 435 閱讀 5914

直接上**

1

.selected:after

11.selected:before

最終實現的效果:

思路:用元素的偽類實現!

1.:after中使用border繪製出三角形

2.:before中繪製長方形的一半,作為對勾

3.在js**中通過新增class類名的方法,我的業務場景是v-for迴圈出的div,當id相等的時候新增這個樣式的類名,即可實現該效果。

第二種思路是:

下方的藍色三角形自己切一張圖放在after偽類中,該偽類的content中新增上『✅』對應的 content:"\2714";調整一下對應的樣式也可以實現該業務需求

CSS3實現打勾 效果

樣式屬性 關於打勾 效果,應該都不陌生。eg 我們在某些商場,支付的時候,支付成功會有個成功的標識,就像下面這樣 我們看,這個效果的html結構 標籤作為畫布 標籤來畫 外圍的圓 標籤來畫 屬性 fill none 設定背景顏色為無色 stroke 68e534 設定圓的主題顏色 同 stroke ...

讓Tab Bar的Item不被選中時不變灰色

為了讓tabbar的按鈕沒有被選中時,仍然保持原來的顏色 設定繪製模式,使不變灰 uitabbaritem onebaritem uitabbaritem alloc init onebaritem.image uiimage imagenamed news imagewithrenderingmo...

CSS設定選中網頁文字時的背景和顏色

在網頁中,選中某段文字,預設的顯示效果為 可以看到,選中後文字顏色為白色,背景為藍色。現我們想設定,選中後文字為紅色,背景為黃色。需要用到css偽類 selection。ie9 opera google chrome safari都支援 selection 選擇器。firefox 通過其私有屬性 m...