CSS, Design, HTML5, UWP app

Styling default JavaScript UWP app controls

When working on my drum machine app I started changing the look and feel a little. I started my changing the black and gray to some more bright colors. Pretty quickly I ran into some issues with changing the look and feel of the default controls. The blue color is specified as a named color ‘Highlight’, which seems to be controlled by Windows.

After searching for quite a while I came across some MSDN documentation that describe a couple of vendor specific CSS pseudo-classes to alter various elements of the controls. The whole list of pseudo-classes you can use to style controls can be found here.

As an example of how you can do this, this is the CSS to change the sliders from the default blue as shown above to a new design.

input[type=range]::-ms-fill-lower {
    background: hsl(320, 100%, 25.1%);
}

input[type=range]::-ms-fill-upper {
    background: transparent;
}

input[type=range]::-ms-ticks-after, 
input[type=range]::-ms-ticks-before {
    display: block;
    color: hsl(320, 100%, 55.1%);
}

input[type=range]::-ms-thumb {
    background: hsl(320, 100%, 25.1%);
    padding: 3px;
    border: 1px solid hsl(320, 100%, 55.1%);
    border-radius: 4px;
    box-shadow: 0 0 10px black;
}

This will make you sliders look like this:

Leave a Reply

Seo wordpress plugin by www.seowizard.org.
%d bloggers like this: