Selection color

[Tintin]

Hi group,

How to change the selection style in Axure as in the following CSS:

::selection {
color: red;
background: yellow;
}

Thanks in advance.

[Simon_Axure]

Hi Tintin,

It sounds like you’re trying to change the style of a widget when it’s selected–is this correct? In this case, you can try setting up a “selected” interaction style for that widget. Interaction styles in Axure RP are triggered by specific events (such as when a widget is set to its selected state or when the widget is moused over), so you could create a selected interaction style that changes a widget to your desired style properties whenever the widget is selected.

If you’re not yet familiar with interaction styles, I’d recommend checking out this tutorial on our support page:

Axure | Interactive Button Tutorial

I hope this is helpful, and please don’t hesitate to let me know if you’d like some assistance with getting this set up in your own prototype file!

[Tintin]

Hi Simon,

Thanks for your reply. What I want is exactly the same as the CSS code above - the ::selection pseudo element, which is used to style the selected text. I know how to write CSS to realize the effect. But how to make it also happen in Axure?

FYI, here is an example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_selection

Thanks again.

[Simon_Axure]

Hi Tintin,

Thanks for clarifying that. In this case, you can try using Axure Share’s “Plugins” feature to add your custom CSS code to your prototype. You can check out this tutorial for how you can get started with that:

Create or Edit a Plugin on AxShare Tutorial

Use Plugins to add custom HTML or JavaScript to your AxShare project in the Head, Body, or to a specific Dynamic Panel. To get started: Log in to your AxShare account, where you'll see a list of all your uploaded projects. Find your desired project and select the Plugins option as you hover over the gear icon along the right-hand side: [image] While the "Plugins" tab is still selected, click the big "New Plugin" button to create a new Plugin. [image] Name your Plugin, add your cod…

It looks like the CSS is being added to the head in the example you provided, so might want to add the code there in the Axure Share plugin as well. (Note that your prototype needs to be hosted on Axure Share in order to create a plugin.)

Hopefully this helps get you started!

[Tintin]

Hi Simon,

Since the Axure Share server is not available in this region, I’m not able to use the plugin. However, I put the code in the style.css in the data folder. It works right now. I’m wondering is it totally OK? Will there be any hidden problems in the future if I manually put custom code in the generated css file?

Thanks.

[Zuvala]

If you want to include additional CSS by default in your exported prototype you can tinker with the Package Content of the Axure application (this is a solution for OSX).

You can view the Package Content by rightclicking on the application:

There go find the folder:
Axure RP/Contents/Rescources/DefaultSettings/Prototype_Files/

There you will find the css files included in the export.
Make sure to copy your template, because it will be overwritten once you update Axure.

Cheers

[Simon_Axure]

Hi Tintin,

That should work as well! A prototype’s generated HTML can be edited and external assets can even be added, however editing the original files too much could cause some issues. If your prototype is still working as expected, it doesn’t look like the code you’ve added is affecting the generated HTML in a problematic way. Keep in mind that you may need to add the code again when re-generating your prototype’s HTML files.

[Anthony_Axure]