Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I am using ZKEE 6.5.1, and on the Ipad when you click a button it leaves a blue border around the button. I know how to remove this border on the desktop, but it doesn't work on the tablet. Can anyone help me with the css necessary so when you click a button on the tablet it doesn't leave that blue highlight around the border? Here is the sample zul I am using to test, this eliminates the border on the desktop, fails on the Ipad in the sandbox :
<zk>
<style>
.z-button .z-button-tl, .z-button .z-button-cl, .z-button .z-button-tr, .z-button .z-button-cr {
background-position: 0 0;
background-repeat: no-repeat;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
width: 0px;
}
.z-button .z-button-bm {
background-position: 0 -4px;
background-repeat: repeat-x;
height: 0px;
}
.z-button .z-button-tl, .z-button .z-button-tr {
height: 0px;
}
</style>
<window title="My First Window" border="normal" width="800px" height="500px">
<button width="400px" height="400px" label="Test"/>
</window>
</zk>
I have figured this out (finally). The following CSS will eliminate the blue highlighted border on the Ipad. I changed the border color to be #CCCCCC but you could change this to whatever you want.
.z-button {
background-image:-webkit-linear-gradient(top, #FEFEFE 0%, #EEEEEE 100%);
background-position:initial initial;
background-repeat:initial initial;
border:1px solid #CCCCCC;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
border-top-left-radius:3px;
border-top-right-radius:3px;
color:black;
font-family:'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
font-size:12px;
font-weight:normal;
line-height:20px;
margin:1px 1px 0 0;
padding:5px 15px;
text-shadow: #FFFFFF 0 1px
}
.z-button:hover {
-webkit-box-shadow:none;
border-color:#CCCCCC;
box-shadow:none;
}
.z-button:focus {
-webkit-box-shadow:none;
border-color:white;
box-shadow:none;
}
.z-button:active {
-webkit-box-shadow:none;
background-image:none;
background-position:initial initial;
background-repeat:initial initial;
border-color:#CCCCCC;
box-shadow:none;
}
Asked: 2013-03-15 13:20:03 +0800
Seen: 28 times
Last updated: Mar 15 '13