iT邦幫忙

1

vue套件的element-ui的css更改問題(大神請進)

  • 分享至 

  • xImage


如圖 這個Radio button點兩下的時候(一定要快速點兩下) 最外圍會浮現一個藍色邊框

想要在點選這個按鈕時不要顯示最外圍這個藍色邊框

(現在官方預設是還好 但是因為拿這個去套圖片的話 這個藍色邊框會變大 有點突兀)

目前已在開法者工具全部取消css 但還是阻止不了這個東西顯示

請問有哪位前端大神能看出端倪..

附上官方文件
https://element.eleme.cn/#/zh-CN/component/radio

codepen
https://codepen.io/ofcourse448/pen/rNaEwdV

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

3
dragonH
iT邦超人 5 級 ‧ 2020-01-31 11:07:22
最佳解答

最簡單改法

codepen

.el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
  box-shadow: none!important;
}

正規改法請自行翻 element ui 的 doc

然後這個跟 vue 基本上沒太大關係

我也找到一個大哥私下給我的
.el-radio-button__inner {
user-select: none;
}

你們都厲害

1
rainbowrain
iT邦新手 2 級 ‧ 2020-01-31 11:12:00

在 css 加上 user-select: none; 就好了

仔細一點就這樣寫

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */ 
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

最佳解答2!

我要發表回答

立即登入回答