How to make the scrollbar of a Jquery-Confirm wider?

Question

I'm trying to make the scrollbar wider since the default one is really inconvenient to click and move faster when there is much content to scroll down. Consider you instantiate a confirm:

var self = this;

$.confirm({
    title: "This is the title",
    columnClass: 'col-md-12',
    useBootstrap: true,
    backgroundDismiss: false,
    content: getHtml(),
    defaultButtons: false
});

And then you load a big amount of content on it:

getHtml = function()
{    
    html = "";

    for (var i = 3000 - 1; i >= 0; i--)
    {
        html += "<span>demo</span><br>"
    }

    return html
}

By using Google Chrome, the scrollbar will look really thin and you need to be very precise when pointing to the scrollbar to drag it with the mouse. To some people, this is very difficult to do.

I tried by changing the overflow CSS property, but that just makes the bar to be visible or not. Any idea about how to force it to be wider?

A fiddle to play with.

Thanks in advance,

Answer 1

The specific class in the Jquery Confirm stylesheet is:

.jconfirm .jconfirm-box div.jconfirm-content-pane::-webkit-scrollbar {
  width: 3px;
}

Set it to what you like in your custom styles to override.