I try to remove the blue box that appears on click in front of buttons as you can see below:
Before asking, I have made a lot of research, I have tried the solutions given by the following topics:
How to remove focus border (outline) around text/input boxes? (Chrome)
Remove blue box around buttons. HTML
How to remove the blue box shadow border in button if clicked
How do I remove blue "selected" outline on buttons?
How do I remove blue "selected" outline on buttons?
Remove blue border from css custom-styled button in Chrome
How to remove focus around buttons on click
I have tried all the answers! It works on computer but not on mobile.
If you are using a computer, you can try by simulating mobile with the inspector. Here is the button: https://jsfiddle.net/t4ykshst/
#add {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
outline: none;
cursor: pointer;
padding: 10px;
overflow: hidden;
border: none;
-webkit-border-radius: 50%;
border-radius: 50%;
color: rgba(255, 255, 255, 0.9);
text-align: center;
background: #1abc9c;
-webkit-box-shadow: 0 4px 3px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 3px 2px rgba(0, 0, 0, 0.2);
}
#add:active {
opacity: 0.85;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
}
<input type="button" id="add" value="+" title="" style="position: absolute; left: 0px; top: 0px; width: 52px; height: 52px;" />
You can add:
-webkit-tap-highlight-color: transparent;
You can also add this to your stylesheets to define it globally:
input,
textarea,
button,
select,
a {
-webkit-tap-highlight-color: transparent;
}
Refer to here for more information.
* {
-webkit-tap-highlight-color: transparent;
}
Test it.
You just need to add
style="-webkit-tap-highlight-color: transparent;"
There will be no highlighting (at least in Chrome 88+) at all if you remove cursor: pointer from #add selector. And if you need it in the "desktop" mode, use something like this:
#media (min-width: 768px) {
#add {
cursor: pointer;
}
}
-webkit-tap-highlight-color is a non-standard feature (mdn). It won't work in browser like safari 14.
Instead, you can use
{ outline: none; }
or apply it specifically through selector
a:focus,a:visited,a:active{
outline: none;
}
Try it
add to the button style "cursor: default;"
This will make a cursor:pointer; it turns into a "default", but will remove the blue shadow on the buttons on the mobile screen as you want
In addition to all the answers here, you have to also specify the background css property explicitly yourself to the button.
Related
I have set CSS for each button on main menu. I want to change the border color for each item.
I can change the color what ever I want. But I want to pick out some specific color for each button.
This part of CSS define the border color:
#main-nav .menu-sub-content {
display: none;
padding: 0;
position: absolute;
z-index: 205;
border-top: 12px solid ;/*#F88C00*/
border-top-color: transparent !important; /*I change to transparent*/
background: #fff;/*2d2d2d*/
color:#999;
-webkit-box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius : 3px;
-moz-border-radius-bottomright : 3px;
-moz-border-radius-bottomleft : 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius : 3px;
}
First I tried this
border-top-color: transparent !important;
And then I put this CSS for 3rd button
.ucuncu-nav.menu-sub-content{
/*border-top:12px solid;*/
border-top-color:#669900 !important;
}
But it didn't changed. How can I change it now?
Elements of your list have id's which you can use when adding separate borders for what you display on hover. Try this code:
#menu-item-17:hover .mega-menu-block {
border-top: 3px solid red !important;
}
#menu-item-7:hover .mega-menu-block {
border-top: 3px solid green !important;
}
etc, for all your <li> menu items with different id's. !important rule is here a quick solution because the is overridden for some default styles.
I'm trying to create a box shadow for underneath my header similar to the one on the https://github.com/RaghavMangrola/the-brighton-times project-mockup.
I've already tried adding the property and value
.header {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
but I'm unsuccessful in getting the box shadow to appear.
Could anyone tell me what am i doing wrong? https://gist.github.com/webdevchris/dd10c3e0c585ad94edb0eef793a092c5 Suggestions are greatly appreciated. Thank-You! :)
Your shadow is under your navigation now.
If you remove the background color of .topnav
.topnav {
overflow: hidden;
// background-color: #333;
width: 100%;
}
You will see what I mean. Your shadow actually is there, on it's place ( .header class )
May be you would like to use it like that ?
.topnav {
overflow: hidden;
background-color: #333;
width: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
Im trying to use a cirlce for one of the radio button, but while using css3 im getting a blurriness around the border.
Here is the code
div {
height: 18px;
width: 18px;
overflow: hidden;
border-radius: 50%;
position: relative;
border-radius: 100px;
box-shadow: 10px 10px 10px -26px inset rgba(0, 0, 0, 1);
border:1px solid red;
}
Any idea how to avoid?
The radio input has a margin by default, and the border of the parent div only wraps around the whole div, so the margin makes it look weird.
I set the margin of the radio button to 3px to fit it in the center. Any blur seems to be fixed in my view.
<div class="rad">
<input type="radio" /> Radio Button
</div>
.rad {
height: 18px;
width: 18px;
overflow: hidden;
border-radius: 50%;
position: relative;
box-shadow: 10px 10px 10px -26px inset rgba(0, 0, 0, 1);
border:1px solid red;
overflow:hidden;
}
input {
margin: 3px !important;
}
https://jsfiddle.net/bp6fLo7c/1/
You could design your own radio button.
1) Disable default appearance :
-webkit-appearance: none;
appearance: none;
2) Style it as you want.
3) Style the "checked" state :
input[type="radio"]:checked {
background-color: red;
}
Demo : https://jsfiddle.net/Paf_Sebastien/fjoyajxn/
I am working on this example and am seeking how to get rid of that blue outline for drop-down select button and the Search inbox inside the drop down menu. See this image:
I already tried:
.btn-default {
outline: none !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}
input, textarea, select, a { outline: none !important; }
input:focus, textarea:focus, select:focus{ outline: none; }
but they are not doing the trick.
Bootstrap form input elements do not use the outline property, but rather recreate it using box-shadow. You were on the right track with what you were doing, but the style that causes this is the following:
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
You will want to override those styles with your own, setting the box-shadow to none and adjusting the border-color to match your default.
As for the select box, you can use the following style, as was originally mentioned by #kamlesh-kushwaha, to override the bootstrap setting:
.bootstrap-select .btn:focus {
outline: none !important;
}
For <select> dropdown, change in bootstrap-select.min line 29:
.bootstrap-select .dropdown-toggle:focus {
outline: thin dotted #333 !important;
outline: 5px auto -webkit-focus-ring-color !important;
outline-offset: -2px;}
to:
.bootstrap-select .dropdown-toggle:focus {
outline: none!important;
}
I remove bootstrap 4 dropdown-toggle 'on click' blue borders by doing this:
.yourdivname:focus {
box-shadow: none;
}
Anything else seemed to be irrelevant. For instance, with normal buttons {outline: none} always seemed to work, but not for this element. All that was needed was the box-shadow:none property.
Add the css focus rule or modify the existing one.
.bootstrap-select .btn:focus{outline:none!important;}
Similarly, you can add for select
You can use input[type] {}
All bootstrap input type as below
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: rgba(126, 239, 104, 0.8);
/* give your style */
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(255, 0, 0, 0.6);
/* give your style */
outline: 0 none;
/* give your style */
}
select:focus {
outline-color: transparent;
}
Bootstrap or not, you can remove the the outline from a select tag with with:
select:focus {
box-shadow: none;
}
I'm trying to overlap some text fields with transparency over a background that also has transparency, the problem is that the text fields appear opaque, as if they had no transparency applied, how can I manage for both the field and background to appear with a certain transparency?
This is the div that contains everything:
#wrapper {
width: 940px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.6);
}
And this is my input field:
input[type=text] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 30px;
padding-top: 5px;
background: rgba(0, 0, 0, 0.8);
color: white;
border: 1px solid black;
}
This is how it looks:
Your code seems to be working great, it just doesn't look all that transparent as the .8 transparency of the black background creates a dark grey which perhaps you aren't quite distinguishing from fully opaque. If you want to check this on your local copy, apply a basic background image (e.g. http://purelycss.com/data-uri-tileable-transparent-patterns/) and you should be able to just about see it below your wrapper and input field.
EDIT: If you're looking to reduce the "black on black" effect, you might want to just reduce the opacity of the 'rgba' - so something more like rgba(0, 0, 0, 0.5) for example. If not this, changing the colour of the base RBG colour might help you out here. It's one of those things you probably just want to play with and tweak.
it looks like it a problem with the stacking of your transparency, to ahcieve a 0.8 transparency on the input box you jsut need to add a further 0.2 transparency to the input (as it has effectively inherited 0.6 of the 0.8 you require from its containing element. see here:
http://jsfiddle.net/e6Z8N/1/
html:
<div id="wrapper">
<input type="text" />
</div>
css:
#wrapper {
width: 940px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.6);
padding:50px;
}
input[type=text] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 30px;
padding-top: 5px;
background: rgba(0, 0, 0, 0.2);
color: white;
border: 1px solid black;
}
You may need to clear the default browser styles applied to input elements.
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;