Bootstrap Star Inputのデザイン変更について

Bubble公式プラグインのBootstrap Star Inputについて質問があります。
デフォルトでは星の外側のみ枠線を追加できるのですが、こちらを"星のみ"に枠線を入れたいと思っております。
イメージは添付する画像のようなデザインです。

CSSを使ってどうにかできないか考えていましたが、手詰まりでして。
お助けいただけますと幸いです。
よろしくお願いいたします。

Star Rating Advancedというプラグインを使うと星を色々とかえられるようです。
実際に入れて試してみたところ、このような動きになりました。

プラグインページはこちらです。

ただ思い通りの実装をする場合は、自作する必要があるかもしれません。

「いいね!」 2

johnさんいつもありがとうございます!
さっそく触ってみようと思います!

「いいね!」 1

思いついたことができたので、共有します。

  1. 半分の星をホバーしている時としていない時の2つ用意
  2. CustomStateにnumber型作成(評価点数を格納)
  3. 星をホバーした時にダミーのGroupを表示(星の下の色付きGroup)
  4. Group表示をトリガーに点数を加算(3つ目の左の星なら2.5点)

「いいね!」 4

共有いただきありがとうございます。
参考にさせていただきますね!

「いいね!」 1