I tried to change the style of gwt radio button style and couldn't succeed.
Is it possible to change the gwt radio button style directly? If No what else should I do to change it.
I tried input[type="radio"]{ } in css, this doesn't help.
Thanks,
Bennet.
From what i think from your question i made a sample, check if it suits your needs
Add the following css class to your application css
.gwt-RadioButton {
background-color: grey;
border: 1px solid #FFFF00;
margin: 10px;
font-size: 2em;
}
No need to add any addStyleNames as the RadioButton by deafult listens to the .gwt-RadioButton css class. The Result after applying above css is something like this,
EDITS :
After you provided the above sample it is very clear what you want. The .gwt-RadioButton allows you to style the RadioButton. What you want is to style the radio circle and the color when it gets selected. In order to do that you need to modify the input[type=radio] class and the label present with the RadioButton.
What we are doing here is disabling the default radio circle using display none and adding our own as a label:before content and then styling it. Hope this solves your problem.
Some Styles that you need to add and then play around to suit your needs are as follows.
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottombottom: 1px;
background-color: #282E5A;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.gwt-RadioButton label:before {
border-radius: 8px;
}
input[type=radio]:checked + label:before {
content: "\2022";
color: aqua;
font-size: 30px;
text-align: center;
line-height: 18px;
}
You need to override gwt-RadioButton Css. For that you need to define a ClientBundle with CSSResource and inject it on your module load.
You may refer to
how to override gwt default css
Related
I'm using Contact Form 7 on a website of a client, and I styled the dropdown menu to this:
.wpcf7-form select {
-webkit-appearance: textfield;
color: #72858a;
font-size: 0.7777777778rem;
background-color: #e9edf0;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
}
Unfortunately the arrows are missing now. Is there anyway to add an down arrow at the right side of the dropdown menu in the same color as the text? I tried different css classes found on this website, but nothing seems to work.
Image of how it displays now:
And how it should be:
The arrow could also be another arrow.
Any help would be appreciated much!
Regards,
Vasco
Here's an option for you... now... I used the span.wpcf7-form-control-wrap that was specifically around the select I was styling. You could also (instead) wrap the selects in a custom div.
This produced this result for me
I also made the triangle using clip-path, so you can change the colors or anything else.
/* Using the menu-813 which for me was the span around the select.*/
span.wpcf7-form-control-wrap.menu-813 {
position: relative;
height: 60px;
background: #e9edf0;
display: inline-block;
}
span.wpcf7-form-control-wrap.menu-813:after {
content: '';
position:absolute;
width: 15px;
height: 15px;
background: #000;
right:8px;
top: 20px;
z-index: 0;
clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.wpcf7-form select {
-webkit-appearance: none;
appearance: none;
color: #72858a;
font-size: 0.7777777778rem;
background-color: transparent;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
width: 300px;
z-index: 1;
position: relative;
padding-left: 2ch;
}
I am trying to edit the style of a popover. In this case I want to edit the width of the display. However, I have a global popover style sheet that applies to all popovers in the application.
/* ========================================================================
Component: popovers
========================================================================== */
.popover {
border-radius: 0;
border: none;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
.arrow {
margin-left: -7px !important;
}
.popover-header {
padding: 1rem 0.75rem 0.5rem;
display: block;
background-color: $secondary;
border-bottom: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.popover-body {
padding: 0.5rem 1rem;
color: $body-color;
}
.popover-close {
position: absolute;
top: -2px;
right: 0;
padding: 0 0.5rem;
color: $gray-lighter;
font-size: 2rem;
font-weight: 400;
line-height: 1;
text-shadow: 0 1px 0 #fff;
&:hover {
cursor: pointer;
color: $body-color;
}
}
I would like to know how in my local css file I can overwrite/add to these inherited styles.
Local Style Sheet:
.team-activity-container {
.icon {
background-image:
background-repeat: no-repeat;
display: inline-block
}
.icon .icon-team {
background-position: -5px -5px;
width: 25px;
height: 25px
}
}
.popover {
background-color: aqua !important;
width: 500px;
}
Edit: The local stylesheet is in the container that displays the popover, and the classes in the html are all related to the contents that fill the popover. While the popover and it's stylesheets are at the global level. how can I edit the popover at the local level without having to touch the global style sheet.
Also, The popover is from ng-bootstrap and I believe the problem is I can't overwrite the default width that bootstrap sets
I don't know all the context you are in, but there are 3 main ways to overwrite existing CSS rules:
add a new stylesheet with the new rules after the existing ones;
if you have control over the new popover HTML, adding a class (for instance version2 so you can edit your variant in a meaningful way as .popover.version2 inheriting what is already sets and changing just what you need);
add "!important" to the rules you add and are intended to overwrite the others, but notice that if the existing rules have already that, it's not going to work.
Depends on the context there could be other solutions like leverage on HTML tags or HTML tags properties if your new popover has some difference with the previous for examples.
I hope this helps.
EDIT: I saw you have edited your question adding stuff.
Looking at the global CSS, if your popover is in a particular container just bind the new rules to the container like this:
.team-activity-container .popover {...rules};
I know many people asked this question. I also searched it here already. One of easiest solutions is with stylesheet:
QRadioButton {
background-color: rgb(252,254,252);
color: black;
}
QRadioButton::indicator {
width: 11px;
height: 11px;
border-radius: 5px;
}
QRadioButton::indicator::unchecked{
border: 1px solid;
border-color: rgb(132,132,132);
border-radius: 5px;
background-color: white;
width: 11px;
height: 11px;
}
QRadioButton::indicator::checked{
border: 3px solid;
border-color: white;
border-radius: 6px;
background-color: rgb(0,116,188);
width: 7px;
height: 7px;
}
But if I do this way, the result looks like this
(The button has only white-round border and blue-round inside). However, can we make the black border outside of them like standard checked radio button
?
(black-border->white-border->blue round). Can we do it in Qt?
Forget about trying to style checkboxes or radio buttons that way in Qt -- it's a nightmare and you will never really get the results you want. The best way to do this in Qt is to make individual image files for each button state, like in the Style Sheet Examples:
QRadioButton::indicator
{
width: 13px;
height: 13px;
}
QRadioButton::indicator::unchecked
{
image: url(:/images/radiobutton_unchecked.png);
}
QRadioButton::indicator:unchecked:hover
{
image: url(:/images/radiobutton_unchecked_hover.png);
}
QRadioButton::indicator:unchecked:pressed
{
image: url(:/images/radiobutton_unchecked_pressed.png);
}
QRadioButton::indicator::checked
{
image: url(:/images/radiobutton_checked.png);
}
QRadioButton::indicator:checked:hover
{
image: url(:/images/radiobutton_checked_hover.png);
}
QRadioButton::indicator:checked:pressed
{
image: url(:/images/radiobutton_checked_pressed.png);
}
Create a QRadioButton with the following style:
QRadioButton{
background-color: None;
}
QRadioButton::indicator {
width: 14px;
height: 14px;
border-radius: 9px;
border: 2px solid;
}
Create a "QLabel" with the style as follow: (height-10, width-10)
border-radius: 5px;
background: #0068B5;
And place the Qlabel at the center of the QRadioButton (Using QTDesigner)
In PySide/PyQT while toggling hide the Qlabel if unchecked or show Qlabel if checked.
Worked for me !!!
Here I am using Oracle ADF.
My button is styled as follows:
af|commandButton:text-only {
background-image: none;
width: auto;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
af|commandButton:text-only:focus {
background-image: none;
width: auto;
outline: none;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
Removed focus outline using "outline:none;" as specified in the CSS snippet.
Now, focus outline is removed in all browsers except firefox.
As per the diagnosis I found that firefox uses "-moz-focus-inner" to render outline.
I tried the following two ways in CSS but no luck.
First way:
button::-moz-focus-inner {
border: 0;
}
Second way:
af|commandButton:text-only:focus::-moz-focus-inner,
af|commandButton:focus::-moz-focus-inner {
border:0;
}
How to specify styles for "-moz-focus-inner" in ADF ?
I had the same problem with my xul programm. The point was, that there was some shadow DOM hidden in the button, which has the dotted border.
This is how I made it work:
button *, button:focus *
{
border: 0;
}
Keep in mind, that the element within the button has a transparent border when the button is not in the :focus state. Therefor you have either to clear it for both states or just set the border to transparent too at :focus.
Hope that helps you too
I have tag me box to add the tag.
http://jsfiddle.net/hailwood/u8zj5/
I was trying to change it's looks using css.
I wanted to create tags and box to look like in this code:
http://jsfiddle.net/hAz5A/20/
I added the css in first but does not make change. Can any css guys help me out?
Just add the css from the second fiddle into the first fiddle
Note: if you want to remove the 'x' - delete tag (for some reason) then add display: none to your tagit-close class
FIDDLE
FIDDLE without delete button
ul.tagit.ui-widget li.tagit-choice {
display: block;
float: left;
position: relative;
line-height: inherit;
border-radius: 6px;
background-color: #EFEFEF;
border: 1px solid #DDD;
padding: 5px 15px 5px 5px;
margin-right: 10px;
color: #08c;
text-decoration: none;
}
ul.tagit.ui-widget li.tagit-choice a.tagit-close {
cursor: pointer;
position: absolute;
right: 5px;
top: 50%;
margin-top: -8px;
}