A generic disabled button style is added in vaadin-button.css like below:
:host([disabled][disabled]) { border-style: dotted !important; border-width: 1px !important; border-color: #545F66 !important; background-color: #F3F4F4 !important; }
In some cases, I want background to be transparent when disabled. How can I archive this?
I tried to add a class component-transparent class to the button, but I don't know how to select the disabled button. I tried:
:host(.component-transparent [disabled][disabled]) { border: none !important; background: transparent !important; }
This does not work. Can anybody help? Thanks in advance.
Related
I have a grid of buttons in which it is easier for me to make some buttons invisible then not creating them. They have no function and are only placeholder. They have a styleclass attached to them called transparent. I was mostly able to hide them but there is still a line around them left that is not fully transparent. It kinda looks like the shadow of the button or something. I tried hiding them with the following CSS:
.transparent {
background: transparent;
outline-color: transparent;
border-color: transparent;
color: transparent;
}
How can I hide that last bit of the buttons? They are ToggleButtons. Not sure if that is important
Even though I am using GTK3 I looked at the documentation for GTK4 and there I found the right property. It was indeed a shadow and it can be removed with: box-shadow: none;
My solution now looks like:
.transparent {
background: transparent;
outline-color: transparent;
border-color: transparent;
color: transparent;
box-shadow: none;
}
try this:
.transparent {
opacity: 0;
}
You could use display: none or visibility: hidden.
display: none removes the element from the page, and other elements can take its place, whereas visibility: hidden leaves the element in its place and just hides it.
Could someone help me with an annoying error?
I want to change the form input fields to transparent background, keeping only the solid line under the field in Themify Bulider with Contact form 7. When I add the custom CSS shown bellow, it still keeps me with the white input boxes, as you can see from: www.creedo.ee.
.wpcf7 input[type=text]{
border: none;
box-shadow: none;
border-radius: 0;
border-bottom: 1px solid #999;
background-color: none;
}
Any suggestions? Thank you!
try the following:
.mdc-text-field {
background-color: transparent !important;
}
I'm trying to add a red 2px border when a customer hovers over one of my three 'service widgets' on my website https://tomnicholls.co on the homepage. I can't figure out where to apply the code as I can't find a container? I can't even seem to add a regular border never mind a border on :hover.
I have tried applying code to .col-link & .col-link .custom-link and have also tried giving the column a class and applying code to that as well as giving the actual content block a class (btn-widget) and applying css to that but nothing seems to be working.
.btn-widget {
width: 328px !important;
margin-left: 72px !important;
border-left: 2px !important;
border-right: 2px !important;
border-top: 2px !important;
border-bottom: 2px !important;
border-color: #c92228 !important;
z-index: 1000;
color: #000000 !important;
}
I would like to solve the problem and have a border on hover
It worked with this :
a.col-link.custom-link:hover {
border: 2px solid red;
}
I am currently designing a webpage using bootstrap. I needed a custom button color, so I designed my own button classes, which you can see there:
.btn.btn-radio {
background: #f3bb70;
border-color: transparent;
border-right-color: #684235;
}
.btn.btn-plus {
background: #684235;
border-color: transparent;
}
Since the button group is of the same color I wanted to put a border only on the right side, to show the separation. But the border appears only when the mouse is over the button (see https://jsfiddle.net/DTcHh/20757/ ). Why is it so ? How do I make it be there all the time ?
This problem has to do with the z-index of the buttons so to fix the problem without mixing up with the margin you need to put borders to all the buttons then remove the first-child left border
.btn.btn-radio {
background: #f3bb70;
border-color: transparent;
border-right-color: #684235;
border-left-color: #684235;
}
.btn.btn-radio:first-child{
border-left-color: transparent;
}
.btn.btn-plus {
background: #684235;
border-color: transparent;
}
Bootstrap has this line in css. This creates problem.
.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
margin-left: -1px;
}
You can use this, but i dant know if it will not make some other problems:
.btn.btn-radio {
background: #f3bb70;
border-color: transparent;
border-right-color: #684235;
margin-left: 0!important;
}
you will have to override the .btn in bootstrap.css file
it currently has
border:1px solid transparent; and hence your border is not showing normally
There is a very strange problem in my website. When opening the homepage on Mozilla the borders of the 2 buttons on my header are missing. You can check the website here: http://www.beautiful-burger.com
Just open it on mozilla and refresh it multiple times to see what I am talking about. The buttons are the ones used on the top right BUT they are also used on the lower part of the homepage (without any problems on the borders). Also, if you check another page, like the Food Blog, you will see that they appear just fine there. Is it a problem with the header? I have been trying to figure this out for the past 2 days but I have no clue what's going on..It runs just fine on other browsers. The css I am using atm is this:
#header-button-container .primary-button,
#header-button-container .secondary-button {
color: #ffffff ;
border: 1px solid #ffffff !important;
vertical-align: baseline;}
.secondary-button {
background-color: transparent ;
border: 1px solid #ffffff !important;
color: #fff !important;}
.secondary-button:hover{
background-color: #D0C274 !important ;
color: #fff ;}
.site-header .secondary-button {
color: #fff; }
Thank you for your time and any help. Feel free to ask if you need any more information since I am very new at this and probably missing something out.
I can't replicate the problem in my firefox. What version and what OS?
In your css your only targeting the border attributes using 'border:' rather than specifying individually. Use something like the following.
#header-button-container-inner .button.secondary-button {
border-color: white;
border-style: solid;
border-width: 1px;
}
if that doesn't work
#header-button-container-inner .button.secondary-button {
border-color: white !important;
border-style: solid !important;
border-width: 1px !important;
}
And if that doesn't work
#-moz-document url-prefix() {
#header-button-container-inner .button.secondary-button {
border-color: white !important;
border-style: solid !important;
border-width: 1px !important;
}
}