### 前言

最近行為驗證碼在很多網站逐步流行起來，對使用者體驗來說，比較新穎，操作簡單。下面我以滑動拼圖驗證碼和文字點選驗證碼為例，透過 **KgCaptcha** 來說說如何修改驗證碼中的圖示。

### 01 滑動小箭頭圖示

設定滑動小箭頭圖示，滑動拼圖預設不拖動的小圖示。

![](http://img.blog.itpub.net/blog/2023/05/10/51d3a61c61b0168f.png?x-oss-process=style/bb)

設定效果如下：

![](http://img.blog.itpub.net/blog/2023/05/10/6e85f94186fe25a7.png?x-oss-process=style/bb)

### 02 錯誤小圖示

設定錯誤小圖示，當滑動拼圖拖動驗證錯誤時的錯誤小圖示。

![](http://img.blog.itpub.net/blog/2023/05/10/ddac7859bb6d5f8b.png?x-oss-process=style/bb)

設定效果如下：

![](http://img.blog.itpub.net/blog/2023/05/10/dd640cad04ca9e5e.png?x-oss-process=style/bb)

### 03 正確小圖示

設定正確小圖示，當滑動拼圖拖動驗證正確時的正確小圖示。

![](http://img.blog.itpub.net/blog/2023/05/10/d24ecc6f01d6c2fb.png?x-oss-process=style/bb)

設定效果如下：

![](http://img.blog.itpub.net/blog/2023/05/10/10f2c07d282a2e8e.png?x-oss-process=style/bb)

### 04 拖動小箭頭圖示

設定拖動過程中小箭頭圖示，當滑動拼圖拖動時的拖動小圖示。

![](http://img.blog.itpub.net/blog/2023/05/10/dfd8c11aadac16fd.png?x-oss-process=style/bb)

設定效果如下：

![](http://img.blog.itpub.net/blog/2023/05/10/591f6000ddc08c62.png?x-oss-process=style/bb)

### 05 提示小圖示

設定提示小圖示，文字點選預設沒點選的提示小圖示。

![](http://img.blog.itpub.net/blog/2023/05/10/d802db8b1b00cfed.png?x-oss-process=style/bb)

設定效果如下：

![](http://img.blog.itpub.net/blog/2023/05/10/0fd60ef7f1b6c2e2.png?x-oss-process=style/bb)

### 相關連結

SDK開源地址：[https://github.com/KgCaptcha](https://github.com/KgCaptcha)，順便做了一個演示：[https://www.kgcaptcha.com/demo/](https://www.kgcaptcha.com/demo/)

行為驗證碼小圖示修改

相關文章