Question

嗨我有jquery ui滑块。我想将滑块的颜色更改为绿色而不是默认灰色。我已经通过我的CSS并试图添加CSS，但我似乎无法改变颜色。

这是我的css

    .scroll-pane {
    border: 2px solid;
    float: left;
    overflow: auto;
    padding: 7px 3px 0 7px;
    width: 57%;
}

.scroll-content { 
    width: 1086px; 
    float: left; 
    height: 481px; 
}

.scroll-content-item { 
    width: 100px; 
    height: 100px; 
    float: left; 
    margin: 10px; 
    font-size: 3em; 
    line-height: 96px; 
    text-align: center; 
}

.scroll-bar-wrap { 
    clear: left; 
    padding: 0 4px 0 2px; 
    margin: 0 -1px -1px -1px; 
}

.scroll-bar-wrap .ui-slider { 
    background: none; 
    border:0; 
    height: 2em; 
    margin: 0 auto; 
}

.scroll-bar-wrap .ui-handle-helper-parent { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    margin: 0 auto; 
}

.scroll-bar-wrap .ui-slider-handle { 
    top:.2em; 
    height: 1.5em; 
}

.scroll-bar-wrap .ui-slider-handle .ui-icon { 
    margin: -8px auto 0; 
    position: relative; 
    top: 50%; 
}

.scroll-bar{
    background-color: #63a81f;
}

我的HTML

    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<script src="js/query.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script><script src="js/main.js"></script>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-1.10.4.custom.js"></script>
<script src="js/jquery-1.10.4.cystom.min.js"></script>
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.4.custom.css"/>
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.4.custom.min.css"/>
<link rel="stylesheet" href="css/style.css?v=2"/>
<link rel="stylesheet" href="css/media.css?v=2"/>

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'>

在html的正文部分

    <div class="column-right">
    <div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
        <div class="scroll-content">
            <img src="images/image1.jpg">
            <img src="images/image2.jpg">
            <img src="images/image3.jpg">
            <img src="images/image4.jpg">
        </div>
        <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
            <div class="scroll-bar"></div>
        </div>
    </div>
</div>

我从jquery ui网站下载的所有其他东西，比如jquery ui smoothness css和jquery-ui。如果您还需要了解其他信息，请告知我们。

Answer 1

使用Jquery：

$('.ui-widget-content').css('background','green');

<强> Demo

使用CSS：

.ui-widget-content{
   background:green;
}

<强> Demo

如何更改jquery滑块颜色

1 个答案: