Help with checkbox, radio buttons and toggle Buttons

Help with checkbox, radio buttons and toggle Buttons

  

Hi people,


I need a help. Right now i have this format of my widgets:


And i need to put icons inside just like that


The right colors is the first widgets but i need help to put the icons.


Many thanks

Hi Thiago.

If you are using the default widgets from Outsystems (for the checkbox at least), check the ::after properties of the input.

Regarding the other two, you can also manipulate the look and feel with a similar approach.


 

mariap wrote:

Hi Thiago.

If you are using the default widgets from Outsystems (for the checkbox at least), check the ::after properties of the input.

Regarding the other two, you can also manipulate the look and feel with a similar approach.


 

Hi,


I do not use only the default, and i need put the icon in the before and after properties of each widgets.


Solution

Hi Thiago Mari,

Consider creating your custom widget. Editing container and CSS, adding icon or image, setting background and borders, edidting on hover css properties. Take this code as an idea for your widget in it's CSS:

.myWidget {
    background-color: blue; 
    background-image: url(“image.png");
    border: 1px solid black;
    color: white;
    padding: 12px 16px;
    font-size: 14px;
    cursor: pointer;
}
.myWidget:hover {
    background-color: yellow; 
}

Regards,

Solution

Marco Arede wrote:

Hi Thiago Mari,

Consider creating your custom widget. Editing container and CSS, adding icon or image, setting background and borders, edidting on hover css properties. Take this code as an idea for your widget in it's CSS:

.myWidget {
    background-color: blue; 
    background-image: url(“image.png");
    border: 1px solid black;
    color: white;
    padding: 12px 16px;
    font-size: 14px;
    cursor: pointer;
}
.myWidget:hover {
    background-color: yellow; 
}

Regards,

Hi,


i already has something like the code, but my problem is just put the icon, not a image.


Many thanks



Hi Thiago Mari,

Inside the container which you are editing the CSS, place the icon and adapt it also with CSS:

More ideas here:

Cheers!

Marco Arede wrote:

Hi Thiago Mari,

Inside the container which you are editing the CSS, place the icon and adapt it also with CSS:

More ideas here:

Cheers!


Hi,


First, if you read about the "Best Pratices", you never change the style in line (only a tips)


Second, the soluction is your previous answer. but thanks anyway