how to design combobox

[Angardia]

Helo

as the title says -

im looking for a way to design the plain combobox in my Adobe animate cc 2018.

so far i managed to give it colors and some shape using CSS, but my issue starts when i try to design the items.

i have no clue how to change their shape - from square shape into rounded corners or lets say circle.

please help me out here

[ClayUUID]

Wait, do you mean style a combo box? Are you just using the HTML5 Canvas combo box component?

[Angardia]

im using HTML5 canvas.

i added css page to it to design

#comboBox{

font-size:50px;

border-radius: 25px;

background: red;

text-align: center;  - doesnt work

}

#comboBox option{

text-align-last: center; - doesnt work

border-radius: 25px; - doesnt work

background:yellow;

}

i know html and css, but most of them wont work

[avid_body16B8]

YOu can either design your own or use a component and style it. I depends what you want and whether you are using AS3 or HTML5.

[Angardia]

i use html 5 canvas and i know its possible somehow to design it, but the question is how as half of my css commands wont work

[avid_body16B8]

Here is an example I made using movieclips

combobox MC.zip - Box

[Angardia]

this one looks amazing!

but im trying to do CSS design with components like this:

and for some reason i cant put my finger on how to change the shape of the yellow colored options.

the text align doesnt work either... they stay always on the left side

[avid_body16B8]

Besides the stylesheet you can add code in the first frame:

combobox-component.zip - Box

Example:

setTimeout(function () {

    // combobox

    $(".ui-combobox").css({

        "color": "teal",

        "font-size": 24,

        "background-color": "pink",

        "text-align": "center",

        "height": 40,

        "widht":160

    });

     $(".ui-combobox option").css({

        "background-color": "red",

        "font-size": 20,

        "color" : "white"

    });

}, 10);

[avid_body16B8 · Accepted solution]

After searching everywhere, I could not find a way to access to parts of the components. I would assume there are classes defined that could be styled. But you are right, I cannot even find the way to center the text in the items.

Apparently centering text in the option/item section seems to be a no-no. Not sure why but everything that I saw was that it is not an option )(no -pun intented) for combox boxes n CSS, JQuery, winforms, etc...

Maybe someone know here. I will keep looking and hopefully get there.

[Nick Gioia]

Have you looked at this tutorial on how to use HTML5 components?

Using HTML5 components |