0

Button Highlight on Ipad - Need to Remove Selection Border Via CSS

asked 2013-03-15 13:20:03 +0800

ansancle gravatar image ansancle
317 9

updated 2013-03-15 13:21:15 +0800

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>
delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
1

answered 2013-03-15 19:18:55 +0800

ansancle gravatar image ansancle
317 9

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;
}
link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2013-03-15 13:20:03 +0800

Seen: 26 times

Last updated: Mar 15 '13

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More