I need to change the styling of my checkboxes. I have read many articles on this but what I am expecting is this: http://i.imgur.com/q2HdOJO.png
When checked, instead of the "check", the checkbox be filled with (in this case) blue color.
I am not sure if this is the "intermediate" state in Mac and thus looks different in my Ubuntu machine but how can I fill the checkbox with color?
You can use the accent-color property in CSS:
#checkbox {
accent-color: #00FFF0;
}
Use images and bind click events with Javascript. It will be much easier than trying to use CSS. CSS will be impossible in some browsers that don't support the styling to hope to achieve.
Here is a related post: How to use images for check boxes using CSS or may be Javascript?
Related
I have a website with a list of checkboxes that can be used for printing as well. Though when printing it should print a clean slate, not the current state of the checkboxes on the website. However, I don't want to clear the state on the page itself, only on the printed version.
So is it possible to visually remove the tick from checkboxes in CSS?
Something like:
#media print
{
input[type=checkbox]
{
tick: none;
}
}
I suggest following approach.
In print you want just the border square box which can be manually ticked, right?
So in print CSS you might just change the design of check boxes so that you hide the original checkbox html , doesn't matter if checked or not. And then just style or show a square border box using some pseudo selector like : before :after, , good enough for a checkbox looking box for printing.
As via CSS you can change design and not the html state of the forms. So in media query of print or print style sheet only option is designing, styling...
Haven't coded in years, and started to play around with Google App Maker last week. As the title suggests, I have a couple questions.
I'm trying to figure out if there's a way to dynamically change the color of a button upon click. Right now I have the button changing enabled status to false on click, and using CSS style to change the color of disabled buttons to gray. Is there a way to do this without disabling the button?
Is there a way to wrap text in a button? Right now I am overlaying a Label on the button with the correctly styled font, but would ideally like to have that text be from the Button, as the space the label takes up is not clickable.
Thanks in advance for any help!
add some lines to your page or global styles this
this should let you wrap text.
.app-Button {
white-space: pre-wrap;
}
Say you want to change your button blue when a Boolean value gets changed to "true" in your data source.
add a class to your styles
.blue{
background: blue;
}
then select your button and in the property editor>Display>styles click the drop down and select binding
set the binding to
=#datasource.item.**YourBooleanItem** === true? ['blue']:[]
Clarification there are two steps
Define a CSS class
Add the Class to the "styles" property of
your widget.
The Answer above uses a "binding" but also means that you've got to have an Item with this binding which you may not want.
I wanted a 'decimal' button to be orange when it was active. So on the Page I created a DecimalActive property. I used the onAttach event to set this property to false.
I created a CSS Class (local to the page) named Orange and Normal
.Orange {background:orange};
.Normal {background:white};
Then the following is my onClick
onClick(widget,event)
{
widget.root.properties.DecimalActive = !widget.root.properties.DecimalActive;
widget.styles = widget.root.properties.DecimalActive ? ['Orange'] : ['White'];
}
The challenge was figuring out exactly what AppMaker wanted in the styles []. I don't think it puts applied styles in this array. At least they didn't show up when I console.log(JSON.stringify(widget.styles);
I have verified that this does work (Dec 2019)
I think this answer is clearer and if someone wants to bind it the color change they still can.
I'm trying to fix something another developer did on this site: http://alamodecreamery.com/products-page/accessories/girls-atom/
If you hover over the sizes a waffle icon appears, however when the item is checked (radio button) the background disappears. I need a label:checked background to show the waffle. I found the CSS selector on line 1150 of wpsc-default.css and added a label:active for testing which works fine (aqua on active).
Can anyone figure out why the :checked background isnt working? Ive tried a few different things which all failed to work:
label + input[type="radio"]:checked {
background:pink !important;
}
input[type="radio"]:checked {
background:pink !important;
}
.wpsc_variation_forms label:checked {background-color: green !important;}
Thanks in advance!
What you are attempting cannot work. You have a structure in which the radio input is contained inside the label. The label is sized to match the waffle, and on hover changes its background. When the radio button is checked, the input gets the :checked state, not the label! And in CSS, right now, it is regrettably not possible to select an element based on a descendant's state. As such, it is not possible with pure CSS to change the appearance of the label based on a pseudoclass of one of its contained elements.
I would recommend adding a bit of Javascript which toggles a class on the label when the radio button is toggled, would be the easiest fix.
Techy sidenote: there have been multiple proposals in the past for 'parent selectors', and all have been shot down by the browser developers because it was unfeasible from a performance perspective due to the way the DOM and CSS are matched up. Nowadays the engines are so efficient the discussion has been restarted, but still in very preliminary stage. Don't expect anything before CSS4 surfaces.
label:checked is invalid. checked is for inputs only.
Something like
wpsc_variation_forms label + input:checked
might work better
I just wrote a tinymce plugin, which has a drop down box. I can increase the size of the select box, by manipulating the CSS file of the advanced theme (the theme I am using). Is there any other way to do it, without changing the CSS? Say in the function of the javascript code that actually creates the select box?
Edit:
I did set the max_width property while creating the listbox, in the createListBox function. But it only changes the width of the elements in the dropdown, not the drop down itself :(
You can always change the css using javascript:
document.getElementById("ATTRIBUTE_ID").style.width = "1000px";
See this SOF link for more details: Change an element's class with JavaScript
You should have a closer look at the tinymce configuration option editor_css.
Using this setting you may configure a css file which will overwrite the default css for the toolbar stuff. This way you don't need to change anything of the core css.
tinymce dropdown generates internally and it's hard to do this in right way, but you always can access the needed element by CSS like:
div[id*='mceu_'].mce-container.mce-panel.mce-floatpanel.mce-menu.mce-animate.mce-fixed.mce-menu-align.mce-in div.mce-container-body.mce-stack-layout {
max-height: 200px !important;
}
for me it works for all dropdown select lists inside modal windows like link-plugin - reduce height of select list block.
i have a dropdown list and text box. i disabled both controls using code behind. now, at one sight we can understand the dropdown list is disabled , because the background color of drop down list is changed automatically.
i want to make that same background color to the text box control too. But i dont know what color code is that. i am working in asp.net . Any suggestions??
Try this
<asp:TextBox ID="txtCDate" runat="server" CssClass="textbox" BackColor="#efefef" />
Actually, the "disabled" color may vary depending on the browser ...
AFAIK, Firefox would put in a grey background to a disabled input box, and you could customize this behaviour via css with a selector like
input[disabled='disabled'] {
... styles go here ...
}
The problem is probably IE-specific, and in that case, this CSS selector would not work... You would probably need to add a specific CSS class to the disabled element to have more control over its look.
You could check this article about this issue : Shawn asks the CSS Guy about styling disabled text inputs
Assuming the reason the text box colors are different is because they have been explicitly set at some point during form validation.
To avoid having to explicitly set the grey color, and instead let the browser set the color to the "disabled" color automatically you could remove the custom color attribute from the text box.
"you can set the BackColor property to Color.Empty"
. . From a Similar Question answered by dustyburwell
In other words, something like myValidatedTextBox.BackColor = Color.Empty