小程序中修改checkbox和radio的樣式

在微信小程序里面,有時(shí)候?yàn)榱伺浜险麄€(gè)項(xiàng)目的風(fēng)格,checkbox和radio的樣式會(huì)有些不同祝懂。

  • 修改checkbox樣式
.wxml
<checkbox-group class='pull-left' bindchange="checkboxChange">
    <label class="checkbox flex flex-vc ">
        <checkbox bindchange='checkboxChange' value="" checked="{{checkboxStatus}}" color='#fff'/>
        <view>可用2000個(gè)積分幣抵扣</view>
    </label>
</checkbox-group>

.wxss
/* checkbox未選中時(shí)樣式 */

checkbox .wx-checkbox-input{
    border-radius: 3rpx;
    height: 26rpx;
    width: 26rpx;
    margin-top: -4rpx;
    /* 自定義樣式.... */
} 

/* checkbox選中時(shí)樣式 */

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  background-color: #e02e24;
  border: 1rpx solid #e02e24;
  /* 自定義樣式.... */
}
  • 修改radio樣式
    .wxml
<radio-group class="radio-group" bindchange="radioChange">
  <label class="radio" wx:for="{{items}}">
  <radio value="{{item.name}}" checked="{{item.checked}}" color="#fff"/>{{item.value}}
  </label></radio-group>

.wxss
/* radio未選中時(shí)樣式 */

radio .wx-radio-input{
  border-radius: 3rpx;
  height: 26rpx;
  width: 26rpx;
  margin-top: -4rpx;
  /* 自定義樣式.... */
} 

/* radio選中時(shí)樣式 */

radio .wx-radio-input.wx-radio-input-checked::before{
  background-color: #e02e24;
  border: 1rpx solid #e02e24;
  /* 自定義樣式.... */
}

作者:Lucky_Aimee
來源:CSDN
原文:https://blog.csdn.net/qq_39364032/article/details/79742415?utm_source=copy
版權(quán)聲明:本文為博主原創(chuàng)文章咕娄,轉(zhuǎn)載請(qǐng)附上博文鏈接!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末奈梳,一起剝皮案震驚了整個(gè)濱河市杈湾,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌攘须,老刑警劉巖漆撞,帶你破解...
    沈念sama閱讀 210,835評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡浮驳,警方通過查閱死者的電腦和手機(jī)悍汛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,900評(píng)論 2 383
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來至会,“玉大人员凝,你說我怎么就攤上這事》芟祝” “怎么了健霹?”我有些...
    開封第一講書人閱讀 156,481評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)瓶蚂。 經(jīng)常有香客問我糖埋,道長(zhǎng),這世上最難降的妖魔是什么窃这? 我笑而不...
    開封第一講書人閱讀 56,303評(píng)論 1 282
  • 正文 為了忘掉前任瞳别,我火速辦了婚禮,結(jié)果婚禮上杭攻,老公的妹妹穿的比我還像新娘祟敛。我一直安慰自己,他們只是感情好兆解,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,375評(píng)論 5 384
  • 文/花漫 我一把揭開白布馆铁。 她就那樣靜靜地躺著,像睡著了一般锅睛。 火紅的嫁衣襯著肌膚如雪埠巨。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,729評(píng)論 1 289
  • 那天现拒,我揣著相機(jī)與錄音辣垒,去河邊找鬼。 笑死印蔬,一個(gè)胖子當(dāng)著我的面吹牛勋桶,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播侥猬,決...
    沈念sama閱讀 38,877評(píng)論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼例驹,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了陵究?” 一聲冷哼從身側(cè)響起眠饮,我...
    開封第一講書人閱讀 37,633評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎铜邮,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,088評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡松蒜,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,443評(píng)論 2 326
  • 正文 我和宋清朗相戀三年扔茅,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片秸苗。...
    茶點(diǎn)故事閱讀 38,563評(píng)論 1 339
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡召娜,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出惊楼,到底是詐尸還是另有隱情玖瘸,我是刑警寧澤,帶...
    沈念sama閱讀 34,251評(píng)論 4 328
  • 正文 年R本政府宣布檀咙,位于F島的核電站雅倒,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏弧可。R本人自食惡果不足惜蔑匣,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,827評(píng)論 3 312
  • 文/蒙蒙 一力奋、第九天 我趴在偏房一處隱蔽的房頂上張望潮剪。 院中可真熱鬧,春花似錦腾夯、人聲如沸校套。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,712評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽笛匙。三九已至彼棍,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間膳算,已是汗流浹背座硕。 一陣腳步聲響...
    開封第一講書人閱讀 31,943評(píng)論 1 264
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留涕蜂,地道東北人华匾。 一個(gè)月前我還...
    沈念sama閱讀 46,240評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像机隙,于是被迫代替她去往敵國(guó)和親蜘拉。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,435評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 每天的學(xué)習(xí)記錄有鹿,可能有的地方寫的不對(duì)旭旭,因?yàn)閯倢W(xué),以后發(fā)現(xiàn)錯(cuò)的話會(huì)回來改掉整體流程 https://develope...
    有點(diǎn)健忘閱讀 4,637評(píng)論 0 7
  • 想把小程序radio和checkbox改成標(biāo)簽的樣式葱跋,研究了一個(gè)早上持寄,終于搞定源梭,最終效果如下,樣式可以隨意修改稍味。 ...
    銀河星海閱讀 7,718評(píng)論 3 8
  • WXML WXML(WeiXin Markup Language)是微信的一套標(biāo)簽語言废麻,結(jié)合基礎(chǔ)組件、事件系統(tǒng)模庐,可...
    許劍鋒閱讀 6,779評(píng)論 3 51
  • 創(chuàng)建小程序 新建項(xiàng)目選擇小程序項(xiàng)目烛愧,選擇代碼存放的硬盤路徑,填入剛剛申請(qǐng)到的小程序的 AppID掂碱,給你的項(xiàng)目起一個(gè)...
    Hachiman閱讀 1,144評(píng)論 0 2
  • 引言 熟悉一門開發(fā)語言或是一種框架怜姿,除了了解它的基本語法、基本控件疼燥、基本屬性之外沧卢,最好的方式莫過于追根溯源,與同類...
    OzanShareing閱讀 1,994評(píng)論 0 1