Services Plugins FAQs

Change color of input field caret

Hello,

I downloaded the CSS Tools plugin for Bubble but I don’t see anyway to change the caret of the input field on my app page.

I have the CCS in the header:

<style>
#input-box {
  caret-color: red;
}
</style>

And have given the ID Attribute = “input-box” to the input element on the page.

But how do I get the plugin to work?

Thanks,

Ryan

Hi @djryanash,
Thank you for reaching out and sorry for the late reply due to the weekend.

Would it be convenient for you to share more details about the issues you’ve encountered?

Namely, screenshots and screencast of your workflow setup, the input element, and the plugin’s elements. The issue you see, the steps to reproduce it, and the expected result. For the screencast recording, I can suggest using the Loom tool.
These details will help us reproduce your use case on our side and find a workaround.

Thank you and looking forward to your reply.
Best regards, :slight_smile:

How’s this?

https://streamable.com/gb63sm

I just solved my problem (but it might not be a solution you want to hear). Lol.

I downloaded another plugin called “Classify” which allows one to add classes to elements in Bubble and then I simply changed the code a bit in the site header to address the class and not the ID.

Thanks for your help though. :wink:

Hi @djryanash,
Thank you for your reply.
Glad that you found a solution for your use case. :slight_smile:

Please note that the CSS Tools plugin also allows adding/removing classes to/from elements by their IDs and many other features.
Feel free to use both of them in case some features are missing in the Classify plugin since both plugins are free and orientated to integrate CSS styling into your Bubble app.

In case there will be any other plugin-related questions, please don’t hesitate to contact me, I’ll be glad to help. :pray:
All the best,

Hi @djryanash,
Hope you are well.

Just wanted to let you know that we pushed an update, Version 5.4.0, for the CSS Tools plugin that Fixed the “Add Custom Style To Head” action.
The main issue with adding custom style to bubble elements is that the built-in bubble style overwrites the custom CSS style, in this case, you have to use the !important rule to override ALL previous default styling proprieties.

As well the tags were not needed in the Add Custom Style To Head CSSTools Action.

Here is an example of a custom CSS style that changes the input style once it is clicked.



I hope the above information will be helpful for you.
Have a great weekend ahead.

All the best,