Here's a gif that I've screen recorded on my device where you can see the blue-box-fill that I'm talking about:
I've tried doing this:
* {
user-select: none;
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
};
button,
button:active,
button:focus {
outline: none;
};
But it doesn't do the trick of getting rid of that blue-box-fill, since it's not really a focus border or outline.
The property you're looking for is tap-highlight-color
-webkit-tap-highlight-color: transparent;
I'm guessing this is happening on iOS?
This should prevent the blue box from appearing:
-webkit-tap-highlight-color: transparent;
I think you want like this ..
button {
margin: 10px;
padding: 10px;
height: 50px;
width: 50px;
background: #0095ff;
border: none;
border-radius: 40px;
cursor: pointer;
color: white;
}
#btn2 {
outline: none;
}
<button id="btn1">Click</button>
<button id="btn2">Click</button>
Related
I'm trying to remove the following shadow from a select when it's focused:
I've set:
select {
border: none;
box-shadow: none;
-webkit-box-shadow: none;
outline: none;
-webkit-appearance:none;
-moz-appearance:none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
HTML:
<select />
But those don't work. Any suggestions?
Use the following style:
select:focus {
outline: none;
}
Or this, for all form elements:
input:focus,
select:focus,
textarea:focus {
outline: none;
}
the solution for me was:
box-shadow: none !important;
Somehow it wasn't taking the box-shadow I've set before adding !important
Now it's not showing the "glow" anymore.
Thanks for the replies anyway,
Dem
I'm trying to style range inputs on webkit. Everything works fine on Firefox but webkit display strange white dots around the track.
I read an article about this and took inspiration from it (link).
Now here is the demo. As you can see there are white dots I can't get rid off.
body {
padding: 30px;
background-color: black;
}
input[type=range] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*required for proper track sizing in FF*/
width: 300px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: black;
border: none;
border-radius: 3px;
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
margin-top: -4px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
<input type="range">
It must be very simple but I'm still struggling with this.
Thank you
The reason why you have four dots is input tag has default background color. i.e. background-color: white; from user agent stylesheet.
Try following CSS
input[type=range] {
-webkit-appearance: none;
border: 0px;
width: 300px;
background-color: transparent;
}
This question already has answers here:
How to hide drop down arrow in IE8 & IE9?
(5 answers)
Closed 8 years ago.
This css code doesn't work.
select::-ms-expand {
display: none;
}
Code of my dropdown:
select::-ms-expand {
display: none;
}
select {
width: 100px;
height: 30px;
-webkit-appearance: none; /* gets rid of default appearance in Webkit browsers*/
-moz-appearance: none; /* Get rid of default appearance for older Firefox browsers */
-ms-appearance: none; /* get rid of default appearance for IE8, 9 and 10*/
appearance: none;
background-color: none;
border: none;
border-top-right-radius: 0px;
border-bottom-right-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-bottom-right-radius:0px;
background-image: url('../img/arrow_question.png');
background-position: center;
background-size: 30%;
background-repeat: no-repeat;
}
I've been looking for a long time and can't find a solution.
Use appearance: none; to achieve what you are looking for.
For instance,
select{
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background: url("yourBackroundImagePath.extension") no-repeat scroll 0 0 transparent;
}
select::-ms-expand{
display: none;
}
Hope this helps.
This helped:
div {
width: 80px;
overflow: hidden;
border: 1px solid black;
}
select {
width: 100px;
border: 0px;
}
I'm using Pygments to syntax some HTML created by the user.
Here's what I have, notice the random padding to the left.
The random space is also selectable
I'm using Ruby to render the code block with
= raw Pygments.highlight(block.content, lexer: 'html', :options => {:lineanchors => "line", :lineos => true})
And here's the styling...
pre {
counter-reset: line-numbering;
border: solid 1px #d9d9d9;
border-radius: 0;
padding: 0;
line-height: 23px;
margin-bottom: 30px;
white-space: pre;
word-break: inherit;
word-wrap: inherit;
width: inherit;
overflow: scroll;
}
pre a::before {
content: counter(line-numbering);
counter-increment: line-numbering;
padding-right: 1em; /* space after numbers */
width: 25px;
text-align: right;
opacity: 0.7;
display: inline-block;
color: #aaa;
background: #eee;
margin-right: 16px;
padding: 2px 10px;
font-size: 13px;
border-right: 1px solid #dedede;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
pre a:first-of-type::before {
padding-top: 10px;
#include box-shadow(rgba(255, 255, 255, 0.9) 0px 1px 1px inset);
}
pre a:last-of-type::before {
padding-bottom: 10px;
}
pre a:only-of-type::before {
padding: 10px;
}
That's on top of a Pygments theme, I'm using Autumn, see here https://github.com/richleland/pygments-css
Bit baffled as to what's causing this mysterious white space but if anyone might know or has experienced this problem before it'd be greatly appreciated.
Thanks
I had the same problem using redcarpet. The problem origins in Haml and solved adding this line in the initalizers.
Haml::Template.options[:ugly] = true
I'm working on an online eBay profit forecasting calculator here
I can't seem to get the input fields to work in safari and mobile safari. They work fine in FF & Chrome. I click into them, but nothing shows when I type. I've been searching google but can't seem to find any clues. I'm wondering if I'm missing something in the css. Here's my css for the input fields:
input {
width: 155px;
padding-left: 5px;
height: 24px;
cursor: text;
font-size: 18px;
font-weight: bold;
border: none;
border-radius: 3px;
box-shadow: inset 1px 1px 2px black;
-moz-box-shadow: inset 1px 1px 2px black;
-webkit-box-shadow: inset 1px 1px 2px black;
background-color: #F8FBEF;
}
Your problem lies in calcstyle.css here:
* {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
I'm not entirely sure why user-select: none; would prevent you from typing into an input but removing this block fixes it for me.
EDIT
Here is a possible solution:
Select everything but your inputs...
*:not(input.field) {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
This still seems to be a problem with Safari 9.0.3 and iOS 9.2. What finally fixed it for me was to set it to text:
input, textarea {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}