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
Related
I am using tooltip from ngx-bootstrap with this code
<button tooltip="Add column before" container='body' placement='bottom' containerClass='tooltipClass'>
<i class="plus"></i>
</button>
and code for tooltipClass is
.tooltipClass{
z-index:100;
color:green
}
The tooltip is beneath the row Numbers and that is because of the z-index on rowNo. but I am adding greater z-index to the tooltip but the class is not getting added to it.
Any ideas what should I do?
Place .tooltipClass class in the root style-file it will work!
I was hitting this same issue, but the solutions above weren't working. Updating the global scss variables of ngx-bootstrap was how I fixed it.
This updates your inner tooltip.
.tooltip-inner {
background-color: #333 !important;
color: green !important;
}
This updates your arrow depending on position.
.bs-tooltip-bottom .arrow::before{
border-bottom-color: #333;
}
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;
}
How to change background color of the below div using ionic4
<div class="changeColor">hello world</div>
what i tried is below
.changeColor{
//width:100%;//notworking
//background-color: white; //not working
--background:white !important;
}
Only inline style is working ?. I think i am facing this because of shadow dom
Any help ??
You can use --ion-background-color or --ion-background-color-rgb property to change background color in Ionic-4 beta.
.changeColor {
/* background color with hex format */
--ion-background-color: #ffffff;
/* background color with rgb format */
--ion-background-color-rgb: 255,255,255;
}
And I suggest you review the official article about Theming in Ionic-4.
For your case you don't need to update background by using css4 variable, you can use the basic css.
.changeColor {
background: white;
}
use can use the basic css : .changeColor{background-color:white;}
Hope It helps :)
I need to change the color of this button <md-button class="md-fab"> only when it is enabled
so I can do that
.md-fab{
background-color: orange !important;
}
but that make the button color 'orange' always,
I want to keep the color gray when the button is disabled
how can I do that
You can use the CSS selector for disabled elements, like this:
.md-fab:disabled {
background-color: gray !important;
}
Then your button will be gray if disabled, and orange if enabled.
Css give you attribute selector for the task.
.md-fab:disabled{
background-color: gray !important;
}
or
.md-fab[disabled]{
background-color: gray !important;
}
Here is Demo
use
.md-fab:disabled{
background-color: inherit !important;
}
in css
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