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

vue.js element-ui

ofcourse448 2020-01-31 10:40:23 ‧ 2071 瀏覽

分享至

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

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

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

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

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

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

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

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

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 基本上沒太大關係

回應 2
分享
檢舉

ofcourse448 iT邦新手 5 級 ‧ 2020-01-31 11:09:44 檢舉

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

ofcourse448 iT邦新手 5 級 ‧ 2020-01-31 11:09:51 檢舉

你們都厲害

登入發表回應

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 */
}