Develop Reference

Change Dropdown Arrow for jsf h:selectOneMenu

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

Weird misalignment in some PC's only

I'm working on a website and the client wanted exactly the mockup. The problem is, the headers and some other divs that I've been using with a background are giving me some problems. And for the first time in my experience, it's not a browser-specific problem.
This is how my sister (I asked her to send me screenshots from another PC...) and I see it:
But, in every Mac, every mobile device, and the PC at my office, I see it like this:
As you can see, only in SOME Windows PCs, there's extra padding in top of the text. If I get rid of the padding-top of the titles, it comes back to "normal", only a pair of pixels thinner.
Here's the html for the title:
<div class="contentHeader"><b><div class="square"><!--◼--> </div>IN PROMOTION</b></div>
And this, is the css of that part of the html:
.contentHeader{
line-height: 38px;
padding-top: 6.5px;
padding-left: 11px;
background-color: white;
/*padding: 3px 8px;*/ /*In fact, if I uncomment this line, I'll see it centered, but not in the other ones...*/
font-size: 20px;
letter-spacing: 1px;
}
.square{
font-size:20px;
background-color: black;
line-height: 15px;
min-height: 19px;
min-width: 19px;
overflow: hidden;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
margin-left: 1px;
margin-bottom: 2px;
font-family: "Arial";
}
I'm open to any solutions... I already use jQuery for some things in this site, so it could be a fix if it really works.
I made sure that the cache is not the problem. And I tested it in my PC in Chrome, Firefox and Edge... everywhere's the same. As I said, I only saw that in my PC and my sister's. Both of us use Windows 10, and in my office I have Windows 10 too. Any ideas of the cause?

Your top have padding and your bottom don't. I made both with the same padding:
.contentHeader{
height: 38px;
line-height: 38px;
padding-left: 11px;
font-size: 20px;
letter-spacing: 1px;
background: skyblue;
padding-top: 10px;
padding-bottom: 10px;
}
.square{
font-size:19px;
background-color: black;
line-height: 19px;
min-height: 19px;
min-width: 19px;
display: inline-block;
vertical-align: text-bottom;
margin-right: 5px;
margin-left: 1px;
margin-bottom: 2px;
}
<div class="contentHeader"><b><div class="square"><!--◼--> </div>IN PROMOTION</b></div>

First, don't use <b>. If you mean to bold the text, use font-weight:bold in CSS.
Putting block-level elements in inline elements (a <div> in a <b>) will cause unexpected positioning. This is probably what's causing this, but we can't say for sure.
Don't alter line-height for positioning purposes. That's solely for text spacing.
Lastly, surround the text in a <span> and use display:inline-block on it (so it obeys vertical paddings). That way, you can position both the square and the text with paddings as well as target it for font-weight:bold.
Try just this and work your way with just paddings and dimensions.
<div class="contentHeader">
<div class="square"></div>
<span class="promotion-text">IN PROMOTION</span>
</div>

toss in some javascript code to read the info, and let it be placed in very bottom footer or some such. it might give details of what is pushing what.
chrome / firefox both have built in or third party apps to install to "right click" and choose inspect. you might find something, some place within the "dom" tree.
=================
honestly not sure what you are talking about... the images you linked to. both show "scrolling" left/right and up/down or at least that is what it seems like. good chance you are going out past "width" and/or "height" of the screen and causing scroll bars to happen per say.

Raw HTML styling differently from jQuery generated HTML with same structure

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

Styling radio button without label

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:

kendoSlider increase/decrease button size

I'm trying to figure out how to decrease the size of the buttons on the kendoSlider (for that matter, the slider is also too large).
Their documentation doesn't really make any mention of it.
Why do I want to do this? I've recently added it to my footer and the buttons are so big that it's bumped up the size of my footer entirely. I'd rather decrease the button size instead of completely changing the size of my footer.
I would assume it's something with the CSS for the slider, but I haven't had any luck with that so far.
Here's an image to demonstrate what I mean:

if the Buttons to big, why just hide them?
With
showButtons: false
in the configuration.
The size of the Buttons you can change via css. For example:
.k-slider .k-button, .k-grid .k-slider .k-button {
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
/* new */
border: 1px solid red;
width: 20px;
height: 20px;
}
.k-slider .k-button .k-icon {
margin-top: 1px;
vertical-align: top;
}
Inspect the HTML element with chrome devtools or firefox.
I think the "size" of the slider you can adjust with this class:
.k-slider-wrap {
width: 100%;
height: 100%;
}
For the sprite-size eventually this helps out.
Or just creatte your own one.