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

Bootstrap CSS Menu Box Type Issue

I am making a site in Bootstrap and am unable to achieve making a simple menu.
I want to make something like this:
So far I have achieved this:
I tried but cant make my CSS to work properly.
Here is my CSS Code:
.navbar-nav li a {
height: 90px;
line-height: 60px;
margin: 0 10px;
background-color: #f1f1f1;
font-size: 1.1em;
border-radius: 10px;
}
Any help would be appreciated.

Check this fiddle https://jsfiddle.net/gward90/h8cnbL5w/1/
To adjust the look of your buttons play with the padding of .nav>li>a Thats a BS default css class. The default padding value is set to padding: 10px 15px
You also need to remove the height from your .navbar-nav li a class that is whats making your buttons so large you also don't need the line-height.

Change ColVis Style in Datatable Javascript

I want to give background color for 'Hide/Show columns' label in ColVis.js file where I need to do the change?

Looks like you can edit the css for the button in extras/ColVis/media/css/ColVis.css
.ColVis_Button {
position: relative;
float: left;
margin-right: 3px;
padding: 3px 5px;
height: 30px;
background-color: #fff; /* here */
border: 1px solid #d0d0d0;
cursor: pointer;
*cursor: hand;
}
Can't really see a way to do this using the api or options.
I suppose you could do this:
$('.ColVis_Button').css("background-color", "red");

These button styles are all CSS defined already. Just change the CSS in the ColVis CSS file that defines them.
This is the official and proper way because these are styles.
instead of css change is there any possibility to change in view page
jquery,i.e,using this,$('#example').datatable({});
You don't change it in the datatable init because that is JS that modifies the ColVis JS params and controls the plugins functionality i.e. not how it looks.

What is the pop up/hoover box called in jquery/javascript/html/css

I am at the beginning of researching how to do something and not sure what is the proper name of what I am trying to research and if there is something that can be done in jquery, or a mix of jquery and css. What I am looking for is something similar to a small pop up when you hover over something; similar to hovering over a hyperlink will reveal the full link. But it will be styled to something that looked like a dialog box and instead of hovering over it the user will have to click it to see that dialog box, but it will be displayed similar to hoovering over something. I hope this question is clear and that I am not over thinking this.

You can do this with pure CSS if you wanted
DEMMO jsFiddle
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
margin-left:100px;
padding:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
.alert {
display: none;
}
span {
display: line-block;
position: absolute;
left: 10px;
top:45px;
}
span:focus ~ .alert {
display: block;
}

I would 2nd SiDiX's recommendation of qTip if you are looking for a jQuery based solution. It has numerous features and is fairly easy to implement.
Since you mentioned you are still in the researching phase, I would suggest a google search on "top jquery tooltip plugins" - you will find many solutions.

Are you talking about tooltip? Check out this plugin called qTip
http://craigsworks.com/projects/qtip/

I believe what you are looking to define is referred to as a 'tooltip'. I like to use PowerTip to implement tooltips. It relies on jQuery, has lots of useful options, and outputs easily styled tooltips.

Checkout Bootstrap and look at what they are calling Tooltip, popover, and modal. That should help clarify.

http://getbootstrap.com/2.3.2/javascript.html#tooltips...
tooltips and popovers by bootstrap...You can put in html in the tooltip if you want.

Is there a way to prevent website text from being searchable?

When searching with Ctrl + F in a website I'd like to exclude some text. Is there a way to solve this?

Apparently
Some quick testing shows that text content added via a pseudo-element will not be found. See this fiddle (search "Google" as an example) which uses the following example code (HTML5). I realize you may want to use a tags or something else, and may need to use javascript for functionality, but the point is, you can make small amounts of text, as you seem to require, that is invisible to searching.
HTML
<ul class="hideText">
<li data-cB="Google" data-cA="https://www.google.se"></li>
<li data-cB="GitHub" data-cA="https://github.com"></li>
</ul>
CSS
.hideText {list-style: none}
.hideText li {
width: 200px;
height: 50px;
padding: 2px;
background-color: #ddd;
border: 1px solid #bbb;
border-top-color: #eee;
border-left-color: #eee;
}
.hideText li:before {
content: attr(data-cB);
display: block;
font-size: 1.2em;
font-weight: bold;
}
.hideText li:after{
content: attr(data-cA);
font-size: .8em;
}

I have a feeling this is a little out of the scope of this question but there is a forum post on Mozillazine discussing how Google had overridden the Cmd-F. The post is here
forums.mozillazine.org/viewtopic.php?f=12&t=2011073
And here is a bug report discussing how websites should never be allowed to capture command shortcuts
https://bugzilla.mozilla.org/show_bug.cgi?id=459744
I would suggest that you use images or canvas for the text you don't want people to Cmd-F, as this will get your desired result.