I am now facing this problem: I want to style radio buttons and checkboxes that are generated by system and do not have a label.
I am working with IBM SPSS Data Collection for making online surveys, so that means it generates all questions to page according to some template I can style (mostly styling with CSS).
I found out many tutorials how to style radio buttons and checkboxes using pure CSS, problem is, all of them are using label: <label for="id"></label>. Point is, that generaged code does not have <label>.
As I said, objects are without label, and single radio button for example is defined by this code (I wanted also attach screenshot how it looks like, but i do not have enough reputation points):
<td id="Cell.2.1" style="text-Align: Center;vertical-align: Middle;background-color: #e6efe6;width: 7%;border-color: Black;border-style: Solid;border-width: 0px;">
<div></div>
<input type="radio" name="_QQ3_Qa_QSingleResponseQuestion_C" id="_Q0_Q0_Q0_C1" class="mrSingle" style="font-family: Trebuchet MS;font-size: 9pt;" value="b"></input>
</td>
I tried to change html code to add label and it worked, but it is not exactly what I need. Problem that occurs with this solution is, I can't let system rotate integrated subjects (questions), because page cannot be generated but have to be explicitly written.
When I used this solution (which is not suitable one), I could simply restyle radio buttons and checkboxes with lable using CSS adding background images like this:
input[type=radio]:not(old) + label{
display : inline-block;
margin-left : -28px;
padding-left : 40px;
background : url('radio_off.png') no-repeat 0 0;
background-size:30px 30px;
line-height : 35px;
}
input[type=radio]:not(old):checked + label{
background : url('/radio_on.png') no-repeat 0 0;
background-size:29px 29px;
}
So my questions are:
is there a way to restyle radio buttons and checkboxes without lable?
or
is there a way to add fake blank lable to every radio button or checkbox on generated page using javacsript or something other?
or
is there any other way I could solve this without need edit generated page code e.g. I can use page how it ist generated?
If I did not included any of the necessary informations, pleas ask for them, i will provide them if I am able to.
Thanks a lot for any help!
Regards,
Peter
For pure CSS styling of Radio Button without label, try the following:
input[type=radio]:not(old) {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
border-radius: 1em;
border: 3px solid #555;
}
input[type=radio]:not(old):checked{
background-image: radial-gradient(circle at center, #555, #555 37.5%, #fff 40%, #fff 100%);
}
The width, height, border thickness and colours can all be styled as required.
It is also possible to use svg images for the checked and unchecked states using something like below:
input[type=radio]:not(old) {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
background-image: url('unchecked.svg') no-repeat;
background-size: cover;
background-origin: center;
}
input[type=radio]:not(old):checked{
background-image: url('checked.svg') no-repeat;
background-size: cover;
background-origin: center;
}
There is no way to style radio buttons with pure CSS, but you can do it with CSS and JavaScript mix, positioning a fake image over the radio and displaying to none the radio button
At the beginning, to do this, to doesn´t matter if you have a label or not.
If you don´t want to make your own script, there are several plugin to do this:
http://www.hongkiat.com/blog/css3-checkbox-radio/
http://www.csscheckbox.com/radio-buttons.php
Even I´ve my own plugin: http://albertofortes.com/projects/piscoPrettyForms/
In my plugin you don't need the label to style the radio button, there is a label but isn't use to style so you can remove it and still works.
See this code edited with Inspector tools:
Related
I am working with jsf and I am using the h:selectOneMenu tag. Currently on the Website it is getting displayed like this :
selectOneMenu
But i would like to change the apperieance of the arrow at the end. It should have a red color and no background. I have tried a lot of things like using the overflow attribute or changing the background of the select item to the dropdown arrow i would like to have. Changing the Color of the element also effects the writing in it. For some reason putting the selectOneMenu into a div and adding folowing styles to it works fine:
.epSelect {
width: 240px;
overflow: hidden;
background: url(..arrowdown_red.png) no-repeat right #FAFAFA;
border: 1px solid #CDCDCD;
color: #333333;
height: 27px; }
.epSelect select {
background: transparent;
width: 257px;
height: 27px;
padding-top: 5px;
font-size: 12px;
border: 0;
border-radius: 0;
-webkit-appearance: none;
padding-left: 3%;
cursor: pointer;
}
"epSelect" ofcause beeing added as class to the div
Does anyone knonw the specific css element which can be addressed to change the color of the arrow only ?
in the standard html select tag it would be addressed by the label:after attribute as can be seen here : http://cssdeck.com/labs/styling-select-box-with-css3
Any help is much appreciated.
Simply put JSF is in this part merely an html generator in which it generates a plain html select/dropdown. Effectively your question is 'How do I change the icon of an html select'.
So look at the following Stackoverflow Q/A for answers
How to change down-arrow on select tag
CSS Select box arrow style
I've been reading a lot of online resources to define browser neutral check boxes, I must find a way to define this style in common.css for check boxes in IE& chrome which is used by aspx,ascx,etc pages
As long as enabled boxes are white and disabled boxes are grey, I will be happy (enough) with them
Please help, shed some light.
So far I have tried many diff styles but not working..
Make checkbox in chrome look like one in IE
below is almost close what I was looking for but its not setting grey color when checkboxes are disabled.
.mycheckbox {
position: relative;
width: 14px;
height: 14px;
border: 1px solid #111;
background: #fff;
-moz-appearance: none;
-webkit-appearance: none;
-appearance: none;
}
.mycheckbox:checked {
background: url(http://vignette3.wikia.nocookie.net/roblox/images /5/57/Very-Basic-Checkmark-icon.png/revision/latest?cb=20131125154354) no-repeat center center;
background-size: 100%;
}
I've been looking into this for a couple of hours now and I simply can't understand what is the problem. I've been able to isolate what's wrong into this fiddle: http://jsfiddle.net/6r781vz3/. Click on the Tab 2! then click to add a new tab three times. You'll notice the spacing is different, also the raw tabs seem to move when selected.
I've built a pure CSS tabbed pane with the famous radio button hack. It works great. I've noticed, though, that it needed a strange padding to make it work (see code below). They are simply a <input> followed by a <label> and then a <div>, as it can be seem in the example.
When I tried to add a dynamic new tab to it I noticed this padding wasn't necessary, but what I found strange is that the HTML structure is the same, but it's behaving differently.
/* I only need this for raw html, and I have no idea why!
Not even idea why I would need this for anything!
I don't need them for dynamic tabs... */
.tabs .tab [type="radio"]:checked + .tab-label {
margin-right: -6px;
}
.tabs .tab [type="radio"]:not(:checked) + .tab-label {
margin-right: -10px;
}
I'm probably overseeing something really simple. I don't think this is a bug, since it works this way on Chrome and on Firefox here.
Can anyone see the problem? :(
Because when using display: inline-block space between elements become visual space on the browser. You can handle this with some solutions. One is to use font-size: 0 to parent element and specific one on child like:
.tabs .tab {
display: inline;
font-size: 0;/*set font size to 0*/
}
.tabs .tab-label {
background-color: rgba(255, 0, 0, 0.3);
font-size: 16px;/*set desire font size*/
display: inline-block;
padding: 7px;
margin: 1px;
position: relative;
vertical-align: bottom;
border-right: 1px solid #ddd;
}
Also a fiddle
I have just encountered the strangest problem I've ever come across in my humble web developing freelance career. I'm building a web application for a job application site where applicants use their webcams to answer 3 short questions. For this I use a jQuery plugin called ScriptCam which uses Flash to activate the user's webcam. I had this all working just fine but now I have the following problem.
I use jQuery .show() and .hide() to show and hide buttons. One button, a replay button, doesn't show up when calling $("#replay").show(); but DOES show when I right click anywhere in the browser after calling this command and hit "Inspect Element"! I've been searching for what could cause this problem but haven't found anything... What could cause this behavior?
This is how I have defined the button:
<div onclick='replay();' id='replay' class="replay">Replay</div>
This is the button's CSS:
.replay{
float: left;
top: 150px;
left: 60px;
z-index: 100;
-webkit-box-shadow: 0 12px 36px -16px rgba(0,0,0,0.5);
background:url('../img/button-grey.png') no-repeat 100% 100%;
background-position: center center;
color: white;
width: 140px;
text-align: center;
padding: 10px;
cursor: pointer;
font-family: Archive;
display: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
Edit: This is CSS of the button's parent div:
.box{
margin-left: 100px;
height: 337px;
width: 300px;
float: left;
text-align: center;
}
I haven't used any delays anywhere and the button really appears only right after I click inspect element somewhere in the browser. I also cannot reproduce this problem anywhere else. Anyone got an idea what could cause this? Any help would be much appreciated, thanks in advance!
Update: It appears that only Safari on Mac is having issues.
Update 2: When moving the button out of it's parent div to directly below the body tag it works as it should! So it's probably a css conflict of the parent div?
Edit: You can see the problem live here, just hit the button "Volgende vraag" en wait for the small video to finish. After that the replay button should appear right above the video.
I've found the solution! The problem is caused by an earlier container div which has the CSS display:none. Although I change that with jQuery's .show() before the problem occurs and it's contents are visible, removing display:none in my CSS makes it work! Thanks for all the great help and suggestions!
For me I had to change the visibility of an element that I found hidden above the image in my stylesheet to fix the issue. I found it by using inspect-element.
Then after changing it the image moved up obviously so I had to change the margins to change it back to its original position.
A good example of implementing 'fashionable' large input text boxes like those found on google and tumblr?
On tumblr how do they use manage to get the input to flow backwards from where the cursor is in the box - on the final input box for URL.
You can use CSS:
input.FancyText {
background: url(something) no-repeat;
border: none;
text-align: right;
}
You can see Tumblr's CSS using Firebug.
Yes, just do like this:
input { padding: 10px; font-size: 26px; }
and it will make the input elements "fatter".
input.fat
{
text-align: right;
font-size: 28px;
}
As SLaks suggested, you can use CSS to control the appearance of the input text boxes. For example, you could use firebug to discover that the CSS tumblr uses looks like this:
background-color:#F9F8E4; /* when in focus */
background:url("/images/input_bg.png") repeat-x scroll left top #F7FCFF;
border:1px solid #97B5D2;
color:#25313C;
font-family:Georgia,Times,"Times New Roman",serif;
font-size:28px; /* This probably makes it "fat" as you want */
width:480px;
font:13px 'Lucida Grande',Helvetica,Arial,sans-serif;
margin:0;
outline:0 none;
padding:7px;
These are the active styles (which are spread across several different rules). Additionally, the comments are mine.
Try setting the font-size property to make the input area "fat"
Try setting the text-align:right property to make the input "flow to the right" as in the URL field.