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...
Related
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 can't understand how to make something like in this site: __smashingmagazine.com
If u resize the window, the search will be with a button. So... try to click on this search icon... the new div will appear with search input. and pay attention to the behavior of it: no matter what u gonna do next this div won't hide it self, but only if you click on 'x' that appear instead of search icon... and this is pure css, right?! how this possible...
I found this article:
Click here
but the behavior is very, very different... and i don't like it at all.
Any idea how to make it work like in the site above? anything would may help!
Thanks!
The example from Smashing Magazine uses the :target psuedo class to change the CSS of the elements when an anchor is clicked. Here's a simplified breakdown of how they've achieved that behaviour.
The anchor is configured to set a fragment identifier in the URL, in the case of Smashing Magazine this is #ms. The have an anchor like this:
Search
When clicked the fragment identifier is set to #ms, they then use this to make the search appear using the :target psuedo class.
#ms {
display: none;
}
#ms:target {
display: block;
}
When the fragment identifier is set to #ms, the :target styles are activated, displaying the search.
Here's a simple example: http://jsfiddle.net/we76L66h/
They are using :target with children (#ms:target + div.example) to also change the styling of children within the targeted element. This is how they make the button change to a "close" button when the #ms fragment identifier is set.
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?
Chrome has some cute features to make the selected form element (input ect) stand out like adding a border color and, more annoyingly, it slightly reduces the margins on some of my form elements after they've been selected, shifting the page slightly each time a text entry box is selected.
It's not the textarea draggable resize effect that chrome has, it's effecting input elements that should have a constant size, but they automatically change once selected.
Is there any CSS to disable this feature, or do I simply have to make sure my text box margins/padding are set up such that Chrome doesn't resize them?
Here it is
textarea { resize:none; }
I love working on other people's sites...the problem was javascript they were using to restyle form elements after click and I have no idea why. Solution was to remove that junk.
On some of my pages I am setting focus on a first input element:
$(':input:visible:first').trigger('focus');
If the first input element is a checkbox or a radiobutton it receives a focus fine but that's not clearly visible, so it's label is not highlighted and screen reader doesn't recognize that, too, i.e. it doesn't read out that field. Is there any way using JQuery to make focus on checkbox or radoibuttons more pronounced?
Can't you assign a suitably clear css class to it?
$(':input:visible:first').focus(function() {
$(this).addClass("superClear")
})
.blur(function() {
$(this).removeClass("superClear");
}).focus();
Also, this might be helpful:
How do I style (css) radio buttons and labels?