I have been trying for hours to change the focus outline color of the custom boostrap controls.
I am able to change the background easily with:
.custom-control-input:checked~.custom-control-indicator {
background-color: red;
}
But I cannot target the outline color for some reason...
I have tried:
input.custom-control-input:focus {
outline: none !important;
outline-color: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
background-color: transparent !important;
}
```
Has anyone run into this issue yet?
Here's a fiddle: https://jsfiddle.net/robsilva/ht1cjLrb/1/
Thanks in advance!
.custom-control-input:checked~.custom-control-indicator {
background-color: red!important;
}
.custom-control-input:focus ~ .custom-control-indicator {
box-shadow: none !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet"/>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
Related
I have bootstrap radio buttons :
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" class="custom-control-input"....
I would like to change the color whenthe form is validated. I tried color, background-color, border, outline...nothing works.
tried to add the bootstrap btn-danger class...nope.. even the word important.
Is there a way to change the color of the button dynamically (meaning by adding a class with jquery addClass) ?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
/* default state */
.custom-radio .custom-control-label::before {
background-color: blue;
}
/* checked state */
.custom-radio .custom-control-input:checked~.custom-control-label::before,
.custom-radio .custom-control-input:checked~.custom-control-label::after {
background-color: red;
/* this background image SVG is just a white circle, you can replace it with any valid SVG code */
background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E);
border-radius: 50%;
}
/* active state i.e. displayed while the mouse is being pressed down */
.custom-radio .custom-control-input:active ~ .custom-control-label::before {
color: #fff;
background-color: #ff0000; /* red color code */
}
/* the shadow; displayed while the element is in focus */
.custom-radio .custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 123, 255, 0.25); /* pink, 25% opacity */
}
</style>
<div class="container">
<div class="row mt-3">
<div class="col">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Red on click!</label>
</div>
</div>
</div>
</div>
Maybe Bootstrap styles overwrite your styles.
So you can have !important in css Style that element get your styles only.
for exapmle
input
{
backgorund-color : black !important;
}
when your form validation is true, add active class on custom-radio class
$(".custom-radio").addClass("active")
and put this css in your css
.custom-radio.active .custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
border-color: #df1895; //desired color
background-color: #df1895; //desired color
}
With some help from the others, I found the answer. You just have to add this css rule :
.active:checked~.custom-control-label::after {
background-color:red;
}
after adding "active" class to your input.
I can't figure out how to change the "checked" background color of this Bootstrap 4 toggle switch. It uses an extra library to toggle dark and light mode – Here on github – but that works. All I want to do is change the background color of the active checkbox, which is by default blue. Does it default to blue from the Bootstrap CSS? This answer Change Bootstrap 4 checkbox background color doesn't work for me; it changes the unchecked color, but I can't grep from it how to change the checked color.
Fiddle here
My code here:
.custom-control-input {
background-color: red;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="darkSwitch" />
<label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>
You can simply altered every possible properties that can affect the color like
.custom-control-input:checked, .custom-control-label::before, .custom-control-input:active and .custom-control-input:focus
but you have to pay attention on altering .custom-control-input::after because it will destroy the pointer inside the toggle switch
Example
.custom-control-input:focus~.custom-control-label::before {
border-color: red !important;
box-shadow: 0 0 0 0.2rem rgba(255, 47, 69, 0.25) !important;
}
.custom-control-input:checked~.custom-control-label::before {
border-color: red !important;
background-color: red !important;
}
.custom-control-input:active~.custom-control-label::before {
background-color: red !important;
border-color: red !important;
}
.custom-control-input:focus:not(:checked)~.custom-control-label::before {
border-color: red !important;
}
.custom-control-input-green:not(:disabled):active~.custom-control-label::before {
background-color: red !important;
border-color: red !important;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="darkSwitch" />
<label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>
Simply add this to your css file, or add it to your html file between <style> ... </style>, to change the background color of the switch - it also removes the blue circle and shadow. =]
.form-switch .form-check-input {
height: 24px;
width: 48px;
}
.form-switch .form-check-input:focus {
border-color: rgba(0, 0, 0, 0.25);
outline: 0;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.25)'/></svg>");
}
.form-switch .form-check-input:checked {
background-color: #30D158;
border-color: #30D158;
border: none;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/></svg>");
}
I get the below black borders in my input fields. How do I remove the ugly 1px border around the controls?
I can't find it in the CSS or don't know how to look for it as I'm new to it.
Code:
<ion-col col-8>
<input formControlName="cardno" placeholder="{{ 'PAYMENT_CARD_NUMBER' | translate }}" card-number />
</ion-col>
Result ugly 1px borders around inputs:
Clean Inputs & textarea:
textarea, input
{
background:none;
outline: none;
-webkit-appearance: none;
box-shadow: none !important;
border: none;
}
Simple Way
input{
border: none; // for black border
outline: none; // for focus outline remove
}
You can add a style attribute to your input and set the border to none
<ion-col col-8>
<input style="border:none;" formControlName="cardno" placeholder="{{ 'PAYMENT_CARD_NUMBER' | translate }}" card-number />
</ion-col>
If you have more than one input tag in your html-file I would prefer to use an external CSS-file and write the following lines to disable the borders for all inputs!
input {
border: none;
}
To remove borders from <input>, just set border property to none.
input {
border: none;
}
<input type="text" placeholder="Card number">
For more info, refer MDN documentation on border property.
If you want to keep the bottom border, and add some padding and margin, see below example.
input {
height: 2rem;
margin: 0rem 1rem;
padding: 0rem 1rem;
border-width: 0px;
border-bottom: 1px solid #e4e9f0;
}
input:focus {
outline: none;
}
<input type="text" placeholder="Card number">
I have been trying to customize a search bar that I initially created using MaterializeCSS. I am using the Autocomplete functionality in order to make searching easier. However, I have been unable to successfully change the green MaterializeCSS font colors and size, etc. Both in the input and in the dropdown that appears when people search. I would very much appreciate if someone here could help. I have tried changing the CSS in lots of ways but have been unsuccessful.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<section id="search" class="section white-text blue section-search center scrollspy">
<div class="container">
<div class="row">
<div class="col s12">
<h3>Search destinations</h3>
<div class="input-field">
<i class="material-icons prefix">search</i>
<input type="text" class="white grey-text autocomplete" id="autocomplete-input" placeholder="Search" />
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
CSS:
.section-search input {
padding: 5px !important;
font-size: 18px !important;
width: 90% !important;
border: #f4f4f4 3px solid !important;
background-color: red !important;
}
.section-search input .autocomplete {
color: #000 !important;
}
Javascript:
// Autocomplete
const ac = document.querySelector('.autocomplete');
M.Autocomplete.init(ac, {
data: {
"Banana": null,
"Apple": null,
"Coconut": null,
"Carrot": null,
"Pear": null,
}
});
It looks like your input element has a class of .grey-text that has a color: #9e9e9e !important; declaration which will override any color styles you add. I'd recommend removing that class (and maybe the .white class):
<input type="text" class="autocomplete" id="autocomplete-input" placeholder="Search" />
And your CSS has an extra space between input and .autocomplete (also don't need the !important anymore):
.section-search input.autocomplete {
color: #000;
}
.input-field .prefix.active {
color: #000!important;
}
.dropdown-content li>a, .dropdown-content li>span {
color: #000!important;
}
.autocomplete-content li .highlight {
color: red!important;
}
Working Example
I try to create login page contains username and password but i want rounded grouped inputs(username and password). I tried this:
border: none;
border-color: transparent;
using css, but still border is coming what might be error.
Solution 1
Working example: http://jsfiddle.net/Gajotres/95Paz/
CSS used:
.ui-input-text {
border: none !important;
border-color: transparent !important;
}
Solution 2
Working example: http://jsfiddle.net/Gajotres/95Paz/1/
HTML
<div id="wrapper">
<input type="text" style="border:none" autocorrect="off" autocapitalize="off" name="username" id="username" placeholder="Username or Email" />
<input type="password" style='border-radius:5px;' id="password" placeholder="Password" />
</div>
CSS
#wrapper .ui-input-text {
border: none;
border-color: transparent;
}
More info
When working with jQuery Mobile you need to understand that final HTML content is enhanced and it don't look like previous one. Also when overrding classes !important must be used. Read more about it here.
When using jQuery Mobile, you need to disable its auto-enhanced as follow
HTML
<input type='text' data-role='none'>
CSS
input, input:hover, input:focus, input:active {
background: transparent;
border: 0;
border-style: none;
border-color: transparent;
outline: none;
outline-offset: 0;
box-shadow: none;
}