So I'm using bootstrap and I'm trying to remove the blue outline around the custom switch button when I click on it, but I can't remove it, I'm using chrome. Here is my code:
#test:focus,
#test:active,
input:focus,
input:active
{
outline: none !important;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
hello how are you doing
<div class="custom-control custom-switch mx-auto shadow-none">
<input type="checkbox" class="custom-control-input" id="customSwitches">
<label id="test" class="custom-control-label" for="customSwitches"></label>
</div>
</body>
</html>
You have to remove it on the following CSS selector:
.custom-control-input:focus ~ .custom-control-label::before {
box-shadow: none;
}
https://www.codeply.com/go/eAUIJbpS2I
Additionally, if you want to remove the light blue border from the switch when focused use:
.custom-control-input:focus:not(:checked)~.custom-control-label::before {
border-color: #adb5bd;
}
Related
I have Googled and found this functionality is deprecated. Found many solution on Stack overflow but all are showing icon when selected but i need it when dropdown is open and when dropdown is open it's showing Question Mark icon not actual icon.
enter image description here
Tried this is on mozilla not like this.
Alternatively If i can bold or change the color of text (DO NOT NEED TO ADD ICON) but it should also on when dropdown is open not after selection. On Mozilla Firefox Color issue is solved it is showing when dropdown is open but not on Chrome or Safari.
Any help would be appreciated.
You can checkout on select2, https://select2.org/dropdown
Allow you to customize your options.
If you really want to do it without plugin, you can try to use with custom to do your own dropdown and make it behave like dropdown with javascript.
Here is the sample code
document.querySelector('#selector').addEventListener("focus",()=>{
document.querySelector('#dropdownbox').setAttribute("style","");
});
function onclickdropitem(id)
{
console.log(id);
document.querySelector('#selector').value = document.querySelector("#"+id+" p").innerHTML;
document.querySelector('#dropdownbox').setAttribute("style","display:none");
}
#selector { width:300px; }
#dropdownbox { position: absolute; width: 300px;}
.dropitem { display: flex; padding:10px;border: 1px solid lightgrey; }
.dropitem img { height:50px; }
.droptext { margin-left: 30px; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input id="selector" type="text" placeholder="Select your option" />
<div id="dropdownbox" style="display: none;">
<div id="test1" class="dropitem" onclick="onclickdropitem(this.id)">
<img src="https://static.thenounproject.com/png/5279-200.png" />
<p class="droptext">Testing 1</p>
</div>
<div id="test2" class="dropitem" onclick="onclickdropitem(this.id)">
<img src="https://static.thenounproject.com/png/5279-200.png" />
<p class="droptext">Testing 2</p>
</div>
<div id="test3" class="dropitem" onclick="onclickdropitem(this.id)">
<img src="https://static.thenounproject.com/png/5279-200.png" />
<p class="droptext">Testing 3</p>
</div>
</div>
</body>
</html>
We have a problem on our page. We use a plugin for choosing a startdate, but this plugin does not display the calandar icon for choose the date. All is working except the calandar icon to show to the customer that he can click. Now we try to insert a icon in the second row of the flex box.
.wscsd_calendar_dates_field::after {
content: "\f073";
}
But with this, it adds a new row to the flexbox and displays the icon. But we want to have it in the second one becasue the user can click there to open the date chooser.
This is the HTML structure we have...
<div class="wscsd_date_picker">
<label for="wscsd_date_picker_display">Abo Start:</label>
<div class="wscsd_date_picker">
<input type="date" class="short wscsd_calendar_dates_field" style="" id="wscsd_start_date" name="wscsd_start_date" min="2022-02-06" value="2022-02-06" placeholder="2022-02-06">
</div>
</div>
How can we do this?
.wscsd_calendar_dates_field::after {
content: "\f073";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="wscsd_date_picker">
<label for="wscsd_date_picker_display">Abo Start:</label>
<div class="wscsd_date_picker">
<input
type="date"
class="short wscsd_calendar_dates_field"
style=""
id="wscsd_start_date"
name="wscsd_start_date"
min="2022-02-06"
value="2022-02-06"
placeholder="2022-02-06"
/>
</div>
</div>
</body>
</html>
I'm very new to website designing an am trying to change the background colour of a button, but for some reason it's not working. Could someone please help?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="widthz=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Title</title>
</head>
<body>
<script src="application.js"></script>
<h3>Small Header</h3>
<button id="InformationButton">Information</button>
</body>
</html>
styles.css:
.InformationButton {
background-color: aqua;
border : solid;
}
Since you have used id to refer the button in your HTML, you should be using the id selector (#) instead of the class selector(.).
Thus replace your CSS as below.
#InformationButton {
background-color: aqua;
border : solid;
}
Read more about CSS selectors in the docs
You are using a CSS ID selector to refer to your button. Either change the CSS to a class selector :
#InformationButton {
background-color: aqua;
border : solid;
}
or change your button element to
<button class="InformationButton">Information</button>
I am trying to show an Input tag of type Search. I am also using bootstrap. But when I use bootstrap.min.css, the Chrome browser no longer shows the "Clear" or [X] at the end of the box. Looks like Chrome user agent stylesheet overwriting my site style. I am not understanding why it is happening.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<label for="gsearch">Search:</label>
<input type="search" placeholder="Search anything" id="gsearch" name="gsearch">
</body>
</html>
In properties I see something like this:
Here is the fiddle link: https://jsfiddle.net/z1ujworf/1/
If I remove the line <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> , the code creates input tag with "Clear" or [X] at the right end (When we type something in the input field). But I want to use bootstrap and its styling. Is there any way to achieve it?
This happens because bootstrap (from normalize.less) overrides the default user agent styles.
You can override this from your CSS like below
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: searchfield-cancel-button !important;
}
Working sample (tested in chrome)
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
-webkit-appearance: searchfield-cancel-button !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<label for="gsearch">Search:</label>
<input type="search" placeholder="Search anything" id="gsearch" name="gsearch">
Im working with this bootstrap html file as the following:
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="w3-sidebar w3-bar-block" style="width:35%">
<h2 style="margin-left:15px;">Some Favorites</h2>
Celery Root
Spaghetti Squash
Killer Mushroom
<input type="text" class="form-control" style="margin-left: 15px;">
<button type="button" class="btn btn-primary" style="margin-left:15px; width: 230px; height:50px; font-size: 20px;">Search Recipes</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
As you can see, i added an inline style to anchor so that the font is blue.
However, when i write the CSS style into the at the head section, the desired CSS effect does not get achieved. It was totally perfect to get the desired CSS effect by writing an inline style. Can anyone explain?
This is happening because bootstrap overwrite some html tags with his own css, so will not work:
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
a {
color: blue;
}
</style>
</head>
<body>
<div class="w3-sidebar w3-bar-block" style="width:35%">
<h2 style="margin-left:15px;">Some Favorites</h2>
Celery Root
Spaghetti Squash
Killer Mushroom
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
So to fix this, you have 3 ways to make this.
1) Put the style inside html tag like you had in your example.
2) Use !important rule to overwrite the tag and apply css always, is not recommended abuse of this method and use it always.
3) Add class or id and work with them, so the css will works fine. This is the most reccomended way to do it.
Here you got a working example for each point:
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
/* first-of-type to select only the first <a> tag and make this example*/
a:first-of-type{
color: green !important;
}
/* this class is inside the 3ยบ <a> tag*/
.myAnchor {
color: blue;
}
</style>
</head>
<body>
<div class="w3-sidebar w3-bar-block" style="width:35%">
<h2 style="margin-left:15px;">Some Favorites</h2>
Celery Root
<a style="color:red;"href="#" class="w3-bar-item w3-button">Spaghetti Squash</a>
Killer Mushroom
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
:) Use this code.
Make sure the is in the head section. It's working for me.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.w3-button {
color: blue;
}
</style>
</head>
<body>
<div class="w3-sidebar w3-bar-block" style="width:35%">
<h2 style="margin-left:15px;">Some Favorites</h2>
Celery Root
Spaghetti Squash
Killer Mushroom
<input type="text" class="form-control" style="margin-left: 15px;">
<button type="button" class="btn btn-primary" style="margin-left:15px; width: 230px; height:50px; font-size: 20px;">Search Recipes</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
apply your style to a tag directly because in bootstrap style effects to a tag directly like this a {color: #337ab7;}
a.w3-button{
color: blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="w3-sidebar w3-bar-block" style="width:35%">
<h2 style="margin-left:15px;">Some Favorites</h2>
Celery Root
Spaghetti Squash
Killer Mushroom
<input type="text" class="form-control" style="margin-left: 15px;">
<button type="button" class="btn btn-primary" style="margin-left:15px; width: 230px; height:50px; font-size: 20px;">Search Recipes</button>
</div>
</body>
As others mentioned it before, Bootstrap is adding its own styles to html elements like colors, font-sizes, margins, etc.
I suggest, If you want your own colors, you can customize them in the bootstrap site, or you can write your own styles in a separate css file or in <style></style> tags.
But it has to be after you inserted the bootstrap.css file.
This is the style for the <a> tag from bootstrap:
a {
color: #337ab7;
text-decoration: none;
}
You can simple overwrite it in you css file (or in your style tag) like:
a {
color: #0000ff;
}
Or you can add your custom css class for an anchor tag like:
.my-anchor {
color: #0000ff;
}
then add it to your anchors in your html files
<a class="my-anchor" href="#"> my link </a>
If you want to deep dive, why is this happened, here is a good document.
In short, think about it, that each selector types has their own counter. The higher the counter, the stronger will be your style, (and harder to overwrite it).
Like in your example. Each styles has their own numbers which is 3 digits.
000
if you are styling just the html tag like this:
a {
color: #00ff00;
}
the counter will be: 001
But if you are adding a class selector :
.my-anchor {
color: #0000ff;
}
it will be: 010 which is stronger and your anchor color will be : #0000ff
If you add another class to your anchor tag, then the number will be: 020 and so on. If you add an id then the number will be 100 which is stronger than the 020.
Just like in the shared document for inline styles
Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
I'm not recommending to use !important beacouse after that, you will be confused, how to overwrite it. If it is a last resolt, then you can use it, but if you need to overwrite it, then the !important styles order will decide which one will be used.
Hope I didn't confused you and helped a little.