Jquery移动导航条轮廓/边框颜色
Jquery Mobile Navbar outline/border colour
我一直在做一个JQuery移动应用程序,并尝试了一切来改变这一点。如果我的应用程序有一个导航栏,我已经设置了背景颜色,并使用自定义图像的图标。我试图得到周围的轮廓每个导航栏按钮白色,但它目前是黑色的。
我在这里设置了一个例子http://jsfiddle.net/HuHNK/
我的头代码是:
<div data-role="page" id="demo-page" data-theme="c">
<div data-role="header">
<img border="0" src="../../images/logo.png" height="28px" alt="ISOSEC" style="float:left;display:inline; padding-left:25px; padding-top: 5px; padding-right: 5px; max-height:28px max-width:1422px; heigh:auto; width:auto;" />
<h1>Patient: Daniel Jones - SD65432 - ACU <br>SMF - ASS - 409 825 6334</h1>
<span class="ui-btn-right">
<img src="../../images/image.jpg?height=100&width=443" style="border:none;margin-right:5px;margin-top:0px;height:2.4vw;width:12.3vw; padding-right:25px;" onclick="showDlgPIN( );"></img>
</span>
<div data-role="navbar">
<!-- navbar -->
<ul>
<li><a href="index.html" data-ajax="false" data-transition="flip" id="other-color"><div class="navbar-padding"><img src="../../images/icons/SearchLarge.png" height="30px;" width="30px;" style="vertical-align:middle"></div></a>
</li>
<li><a href="../../index.html" data-ajax="false" id="other-color"><div class="navbar-padding"><img src="../../images/icons/ApplicationL.png" height="30px;" width="30px;" style="vertical-align:middle"></div></a>
</li>
<li><a href="../App/index.html" data-ajax="false" id="other-color"><div class="navbar-padding"><img src="../../images/icons/applogo.png" height="30px;" width="30px;" style="vertical-align:middle"></div></a>
</li>
<li><a href="#" data-ajax="false" id="other-color"><div class="navbar-padding"><img src="../../images/icons/View.png" height="30px;" width="10px;" style="vertical-align:middle"></div></a>
</li>
<li><a href="#" data-ajax="false" id="other-color"><div class="navbar-padding"><img src="../../images/icons/LastValue2.png" height="30px;" width="30px;" style="vertical-align:middle"></div></a>
</li>
</ul>
</div>
<!-- /navbar -->
</div>
<!-- /header -->
我设置的主要自定义css是:
#other-color {
background: rgba(115, 189, 226, 0.9);
}
.ui-btn-inner{
background: rgba(115, 189, 226, 0.9);
}
.ui-body-c {
background-image: url(../../images/BackgroundDot2.png);
border: #FFFFFF;
}
.navbar-padding
{
padding-top: 6px;
padding-bottom: 6px;
}
.listItemNoIcon .ui-icon
{
display: none;
}
.navbar
{
outline-color: #FFFFFF !important;
border-color: #FFFFFF !important;
}
我真的很感谢任何帮助,我已经尝试了一些不同的技术,可以看到上面。 我们可以编辑jquery mobile css unminified版本用于调试。您可以尝试下面的代码。用于自定义导航栏样式。给他们你自己的css类。
<div data-role="header" data-position="fixed">
<div data-role="navbar" class="footer-tab">
<ul>
<li class="head-foot-color-active"><a href="sample1.html" data-transition="none" class="ui-btn-active"><img src="pqr.png" height="20" width="30"/></a></li>
<li class="head-foot-color"><a href="sample2.html" data-transition="none"><img src="xyz.png" height="20" width="30" /></a></li>
<li class="head-foot-color"><a href="sample3.html" data-transition="none"><img src="abc.png" height="20" width="35" /></a></li>
</ul>
</div><!-- /navbar -->
</div> <!---header--->
自定义CSS如下。
.head-foot-color-active a
{
background: #709630;
border-style:groove;
}
.head-foot-color a{
background: #99ce3e ;
}
.footer-tab
{
bottom: 0px;
background: #6aaedb;
}
这可能有帮助
添加id="testing"到导航栏,然后在CSS代码上使用:
#testing ul li a{
border-color:"white";
}
这对我有用,祝你有美好的一天!
相关文章:
- 边框颜色是't如果输入为空,则更改
- HighCharts:3D柱形图在选择时更改边框颜色
- 在不更改边框颜色的情况下更改文本的颜色
- 如果值为空或0,如何更改html select标记的边框颜色
- 如果键入文本,请更改输入边框颜色
- HTML表格在打印后缺少边框颜色和背景颜色
- 通过指定类更改表格td边框颜色
- 如何更改页眉'的底部边框颜色取决于滚动位置
- 设置表单上文本框的边框颜色
- 如何从jquery中获取内联样式的边框颜色
- 根据是否选择了文件来更改文件上传时的边框颜色
- Javascript - 当用户输入内容时更改表单文本框的边框颜色
- 如何使用 JavaScript 在文本框焦点上设置边框颜色
- 通过表单验证更改 DIV 边框颜色
- 如何使此更改边框颜色动画停止
- 如何更改伪锚点的边框颜色
- 如何在高对比度模式下设置边框颜色
- 如何根据另一个字段中的值将字段边框颜色更改为红色
- 无法使用 jQuery 对边框颜色进行动画处理
- 在焦点上更改边框/颜色