I saw some nice styled dropdown boxes like this one and wanted to create my own one:
The CSS to create the arrow was quite simple. It just adds a unicode character as arrow as content to the :before class of an element;
.select:before{
content: "\f0d7";
}
I tried it on my own, but the character is not shown, because the character is not contained in a default language like Arial:
http://jsfiddle.net/3cW9M/
I could of course include a font, that contains this character, but I think its to much overhead to add another ~100kb to the page just for the error.
Is there any other good solution to archive this arrow style without additional fonts or images?
You may use other unicode or use borders :
DEMO
.select:before{
content: "\25be or \25bc ? ";
float:right;
color:gray;
}
.select:after{
content: "";
margin:0 0.5em;
display:inline-block;
border: 7px solid transparent;
border-top:8px solid gray;
border-bottom:0 none;
}
Use \25bc instead.
And if you want to change the color just add css color property.
.select:before{
content: "\25bc";
color: gray;
}
All CSS method
.arrow-down {
height:0px;
width:0px;
border:none;
border-top:5px solid #000000;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
}
http://jsfiddle.net/2sU2x/2/
If you want to use FontAwesome:
add this information into the <head> </head> section:
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
then this CSS:
.select:after {
content: "\f0da";
float: right;
border: none;
font-family: 'FontAwesome';
}
caret-down = "\f0d7"
caret-up = "\f0d8"
caret-left = "\f0d9"
caret-right = "\f0da"
Your estimate of 100kb is a bit off for that one arrow. You can compile fonts from just the symbols you need for your app, using for example http://icomoon.io/. I can, off hand, estimate that arrow would generate a font of about 1kB.
If you take into account all the little bits and pieces you want to include in your page, like say social plugin icons, navigation tidbits, user icons, action icons, et caetera, then the method you specify of including custom fonts in your page is pretty worth it, assuming you only include the glyphs you need!
Related
It seems the only option available today is border=x where x is the thickness of the border. It looks really ugly as it outlines each choice in the group.
I want a simple border around all the choices. When I go into debug it I can manually add fram="box" to the generated Table html and it looks great.
I can't figure out how to add frame="box" to the xp:checkBoxGroup I've tried using attributes without success.
Any ideas?
If you use a xp:checkBoxGroup the XPages runtime puts the checkboxes in table cells and wraps it with a fieldset element. You can easily target that using some CSS. That's how I would solve this.
If you want a simple border around your checkbox group you can do this:
<style>
fieldset.xspCheckBox {
border: 1px solid #333333;
}
</style>
<xp:checkBoxGroup id="checkBoxGroup1">
<xp:selectItem
itemLabel="Blue"
itemValue="blue">
</xp:selectItem>
<xp:selectItem
itemLabel="Green"
itemValue="green">
</xp:selectItem>
</xp:checkBoxGroup>
Or if you want a border around every option you can use this:
<style>
fieldset.xspCheckBox {
border: 0;
}
fieldset.xspCheckBox label {
border: 1px solid #444444;
padding: 5px;
cursor: pointer;
}
fieldset.xspCheckBox label:hover {
background: #eeeeee;
}
</style>
(note that the :hover class isn't really necessary, but adds a hover effect to all options: depending on your browser requirements that might not be supported)
Just add a style with a border definition to your xp:checkBoxGroup:
<xp:checkBoxGroup id="..." value="..." style="border:1px solid black;">
...
</xp:checkBoxGroup>
Instead of putting the style directly into xp:checkBoxGroup definition you can use a css class.
My website - http://www.automated-stores.com has the strange feature of a blue-ish background for text areas, seen more specifically here: http://www.automated-stores.com/vending-machines-business-electronics-cosmetics-perfume
I didn't code the website, but I suppose that to change this it would have to be in the stylesheet.css, does anyone know what code to enter/change?
I thought it would be this:
input,textarea,select {
padding: 1px;
border: solid 1px #000000;
font-size: 10pt;
color:#000000;
background-color:#ffffff;
}
(the colours were different before) but I have changed it several times with no effect.
I looked through your source code and you need to find your style.css under your root and change this:
input,textarea,select {
padding: 1px;
border: solid 1px #5c8593;
font-size: 10pt;
color:#42484d;
background-color:#224f5f;
}
to this:
background-color:#ffffff;
Remember this will affect everything with the class of input, textarea, select. I used the chrome inspect and firebug lite tool to verify this and it worked. If you only want to effect text areas bg color do this:
input,select {
padding: 1px;
border: solid 1px #5c8593;
font-size: 10pt;
color:#42484d;
background-color:#224f5f;
}
textarea {
padding: 1px;
border: solid 1px #5c8593;
font-size: 10pt;
color:#42484d;
background-color:#ffffff;
}
The code in the question does it, provided that you insert it e.g. in a style element after the tag <link rel="stylesheet" href="style.css" type="text/css" />. The external style sheet sets the background color etc. in a simple manner, which can easily be overridden, provided that you place your code after that link tag.
If this does not appear to work, check, in a browser, the HTML source code of the page. It is possible that the server software does some modifications to your code or that your browser has got an old version of the page (Ctrl+F5 should help then).
your <textarea> have attribute <... class="textarea"... You could add this to your stylesheet
.textarea {
background-color: #FFFFFF;
}
The specific rules changing the color of the textarea on the page you gave (the second link) is in style.css line 44:
input, textarea, select {
background-color: #224F5F; // This is the blue background
border: 1px solid #5C8593;
color: #42484D;
font-size: 10pt;
padding: 1px;
}
If it is just textareas that you want to style but dont want to touch the formatting you can do one of two things:
Option 1
Keep CSS as it is and add this underneath:
textarea {
background-color:#FFFFFF !important;
}
I dont like doing this as it makes the CSS to rigid and lots of !important declarations makes managing the style very difficult.
Option 2
Change line 44 styling to:
input, textarea, select {
border: 1px solid #5C8593;
color: #42484D;
font-size: 10pt;
padding: 1px;
}
textarea {
background-color: #FFFFFF;
}
input, select {
background-color: #224F5F;
}
I'd recommend simply targeting the textareas and changing their background colour and giving them a border.
textarea {
background-color:#FFF;
border:1px solid #224f5f;
color:#000;
}
I'm trying to make a 30x30 pixel box. I don't care if it uses a button, a, span, whatever.
I can't get anything to show up uniformly across all browsers.
Here are the requirements:
Must append to the end of an
existing line (no line breaks)
Must be able to assign click events in jQuery
Must be a square
Appears flat with no sort of bevel
You should be able to achieve what you want simply by styling an 'A' tag in your css.
CSS:
a {
display:inline-block;
width:30px;
height:30px;
background-color:#ccc;
border:1px solid #ff0000;
}
HTML:
See working example: http://jsfiddle.net/fQP6J/1/
<html>
<style>
.btn {
BORDER: 1px solid; COLOR: black; height: 30px; width: 30px;
}
</style>
<button class=btn >btn</button>
</html>
Why does the following anchor tag has text underlined?
.pagerLink {
background-color: #E4F5F8;
border: 1px solid #C0DEED;
text-decoration: none;
}
<a class="pagerLink" href="#">test</a>
Probably because another style block has better precedence than your pagerLink class. Try:
.pagerLink {
background-color: #E4F5F8;
border: 1px solid #C0DEED;
text-decoration: none !important;
}
use text-decoration:none for a in your styles
Ex:
<head>
<style>
.pagerLink
{
background-color: #E4F5F8;
border:1px solid #C0DEED;
}
.pagerLink a
{
text-decoration:none !important;
}
</style>
</head>
<body>
<div class="pagerLink">
test
</div>
</body>
You can use firebug(a firefox plugin) to findout which style is being used for the element now and whether its being overwritten by some other style definition
http://getfirebug.com/
I cant yet leave comments and I respect this is an old question but be extremely careful when using !important in your declarations:
text-decoration: none !important;
You'll probably get away with it in smaller projects but with any non-trivial project that involves collaboration from multiple sources this sort of thing can be incredibly annoying when it over-rides a property I need to set further down the line. Not only do I have to change this to make my fix stick but I also have to check that changing it does not break anything else, which it probably will.
Better is to refactor your declaration or restructure your code so that you dont need to use !important and only fall back to !important when you cant.
To remove underline you need to follow following style code snippet.
.pagerLink{
background-color: #E4F5F8;
border:1px solid #C0DEED;
text-decoration:none !important;
}
How do I square the corners of a submit button? Can it be done with CSS? I just noticed that Stackoverflow buttons are pretty much the same thing (don't close it for mentioning SO, just want to illustrate what I mean).
Use the following field and command in your css:
border-radius: 0;
Just add CSS to it, and the default look will dissappear.
input.button, input.submit {
border: 1px outset blue;
background-color: lightBlue;
}
edit: changed the selector to use class name instead, as suggested in comments.
You could use the HTML element instead of input type. It's quite easy to style that one.
If you specify the height and width in the css, you'll make the corners square, and retain the certain level of automatic fancy-ness that normal buttons have... and that way, you wont have to build your own.
input.button, input.submit {
height: 30px;
width: 20px;
}
I seem to remember this only working if the height is large enough, but it might work any which way.
Use border: 1px solid for the element.
<a class="test">click me</a>
<style>
.test
{
cursor: pointer;
background-color:#E0EAF1;
border-bottom:1px solid #3E6D8E;
border-right:1px solid #7F9FB6;
color:#3E6D8E;
font-size:90%;
line-height:2.2;
margin:2px 2px 2px 0;
padding:3px 4px;
text-decoration:none;
white-space:nowrap;
}
</style>
This is how a stackoverflow button is made.