I have a group of ToggleButtons on my application whose background colors I would like to change. Currently my code gives all the buttons a gradient of <.untoggled-button> and the unselected buttons have that gradient with an added blue film. I have two problems: I want to remove the blue film on the untoggled buttons and I need to access the toggled button to change it's styling. <.toggled-button> is just a placeholder that doesn't do anything right now.
I'm wondering how to access the unchecked and checked versions of the ToggleButtons in my css, as to override the default bootstrap styling!
the jsx:
<ToggleButtonGroup className="view" type="radio" name="options" defaultValue={2}>
<ToggleButton value={1} className="untoggled-button" > title</ToggleButton>
<ToggleButton value={2} className="untoggled-button"> title</ToggleButton>
<ToggleButton value={3} className="untoggled-button"> title</ToggleButton>
</ToggleButtonGroup>
the css (this is very incorrect, but I'm hoping to be able to style both unchecked and checked buttons):
.untoggled-button{
background-image: some gradient !important;
}
.toggled-button {
background-image: another gradient !important;
}
setting the background color to transparent and adding a .active class seems to have worked!
.untoggled-button{
background-image: some gradient !important;
background-color: transparent !important;
}
. untoggled-button.active {
background-image: another gradient !important;
}
Related
I would like to hide the indeterminate state icon (minus icon) and use background color instead.
At the moment, I can change the background color during the indeterminate state using the css code below. However, the minus icon is still visible. I know I can do display: none; but that will not let the background color show.
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background: blue; }
You can use the following CSS to hide the minus icon:
::ng-deep .mat-checkbox-indeterminate .mat-checkbox-background .mat-checkbox-mixedmark {
display: none;
}
This means you'll get a solid background colour on the checkbox when it's in the indeterminate state, and this will change to a tick when all child checkboxes are checked:
Please see this StackBlitz for a demo.
THE PROBLEM:
In my project, when I select and then unselect a button on mobile, it still remains dark because it's in focus and that's confusing:
Screen recording
Here's the deployed page: https://covid-19-mortality.netlify.com/
WHAT I WANT TO ACHIEVE:
I would like to override the button focused styling so that it is intuitive that the button is in focus and not selected.
WHAT I HAVE TRIED:
I have tried every solution in bootstrap button shows blue outline when clicked.
Try this
.btn:active {
background: #fff !important;
color: #343a40 !important;
}
I'm creating a form where once it has been submitted, I want to remove the background colour of the input.
If I use Google Autofill on an input, the background color and color attributes are ignored.
In dev tools it's showing that my styles SHOULD be visible, but they're not.
input:disabled, textarea:disabled, .disabled {
background: #060301;
color: #f0eef3;
}
/* Annoyingly we have to override Chrome styles */
input:-webkit-autofill:disabled,
textarea:-webkit-autofill:disabled,
input:-internal-autofill-selected {
background: #060301!important;
color: #f0eef3!important;
}
It works fine unless autofill was used.
Any ideas?
You can re-set the value of the input field right before disabling it. That will reset Chrome's autofill status.
inputField.value = inputField.value
inputField.disabled = true
The only way to achieve the desired effect - at least visually - with only CSS is to colorize the background using a large inset box shadow rather than setting the background color. The latter is locked by the user agent stylesheet.
Set a background color for all disabled input elements of type="text": You can add the disabled attribute in html and add background.
Reference
input[type=text]:enabled {
background: #ffff00;
}
input[type=text]:disabled {
background: #dddddd;
}
<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" disabled="disabled" value="Disneyland">
</form>
By default tt-input is transparent, I want to change its background color when on focus to be white, but when I change the color the hint is not shown anymore because it's hidden by the new color.
How can it be changed?
The background-color: transparen has been set as an inline style with javascript.
You should overwrite it by using !important.
for <input class="typeahead" type="text" placeholder="States of USA"> you should use:
.typeahead.tt-input {
background-color: black !important;
}
Also see: https://github.com/twitter/typeahead.js/issues/677
I'm trying to remove the border from a bootstrap input form-control.
After setting border-color:white i'm getting this
How can i lose this top border ?
I thought it might be a shadow property but ... nothing.
This is the markup
<div class="form-group">
<input class="form-control transparent-input" type='text' name='name' placeholder="Field title..." required>
</div>
bootstrap v3.1.1
EDIT :
None of the solution below is working.
see this Fiddle
Set background color using rgba() also add border:none; to remove the border
<style>
input.transparent-input{
background-color:rgba(0,0,0,0) !important;
border:none !important;
}
</style>
The last value 0 will make the background transparent
or simply set background color as transparent.
<style>
input.transparent-input{
background-color:transparent !important;
border:none !important;
}
</style>
add !important to override the existing style
with bootstrap class you can make it transparent ...just apply this class to your code .bg-transparent
Change the background-color.
.transparent-input {
background-color: rgba(0, 0, 0, 0);
border:none;
}
You can change the background color to (0,0,0) and its opacity to '0'.
Also use border:none. And try using !important to override the existing style if the above doesn't work.
.transparent-input { background: tranparent; }
Try setting box shadow to none. See https://www.w3schools.com/cssref/css3_pr_box-shadow.asp