I have a input text box of #c7e296 color and when in focus then color changes to #668933 but when I test this in different browser they show some different colors on focus.
Can someone explain why?
Below is my code,
.after input[type="text"]:focus {
border: 2px solid #668933;
}
.before input[type="text"] {
border: 2px solid #c7e296;
color: #000000;
font-size: 1em;
}
Some browsers (notably Safari) do a highlight around a focussed input field themselves. So if you set a border, and the browser does its highlight, the colors can bleed together.
You can disable that by putting outline-width: 0 on your :focus rule(s):
.after input[type="text"]:focus {
border: 2px solid #668933;
outline-width: 0;
}
Related
This will be a question that is hard to exmplain but please keep an open mind.
My experiment:
I have a div that contains some content and this div is hidden on load.
So now i have an element that when it is clicked shows the content of the div.
What I want:
I want to create a underline that has a small falling down break in the middle and when i click on this it will give me the desiered show/hide effect.
My css skills are nothing to brag about and I honestly dont even know where to start.
Image that might clarify:
How do I do this?
If you don't need to support older browsers you can create a triangle with borders like so:
.nav-item::after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #000;
}
obviously would need moving about to fit where you want it.
If you need to support older browsers however, you can just absolutely position a triangle image to appear under the nav item.
try this
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.class:after{
content:"";
border:10px solid transparent;
border-top-color:red;
}
So I'm making a web app using HTML, CSS, JavaScript, and AngularJS.
So far, I have a box with some content in the box. When that box is clicked, I call a javascript function to display more boxes and I did that using ng-click.
<div ng-click="!(clickEnabled)||myFunction(app)" class ="box">
*** things displyaed inside the box ***
</div>
clickEnabled's value (true or false) determines if myFunction() gets called or not and this part works perfectly. ng-click is disabled when clickEnabled is false.
Now the problem is that in my css file, I have my .box class such that the cursor is pointer when I hover over the box and background of the box also changes on hover. Is there a way to make cursor:default and make it so that it doesn't change background color of box when ng-click is disabled or when clickEnabled is false?
Here's a sample of my css code
.box {
border: 1px solid lightgray;
padding: 10px;
border-radius: 5px;
border-color: white;
box-shadow: 0 0 5px gray;
cursor: pointer;
background: #353131;
border-width: 2px;
display: inline-block;
width: 300px;
height: 150px;
}
.box:hover {
background-color: dimgrey;
border-color: grey;
}
Again, I don't want the cursor to be pointer when clickEnabled is false/ng-click is disabled.
Thanks in advance :)
You can try to use ng-class
<div ng-click="!(clickEnabled)||myFunction(app)" ng-class="{no-cursor: !clickEnabled}" class="box" >
*** things displyaed inside the box ***
</div>
.box.no-cursor {
cursor: default;
}
Fiddle
I want my textbox to have a #96f226 border at input:focus, and it works. But if you click away and click back in, it doesn't have that green border anymore.
CSS:
#input {
background: #4a4a4a;
border: 1px solid #454545;
color: #96f226;
}
#input:hover {
background: #656565;
}
#input:focus {
outline: none;
border: 1px solid #96f226
}
HTML:
<input type='text' id='input'>
Edit:
It only doesn't do it if you click in, start typing, click out, and then click in.
The reason this is happening is because your jQuery is adding an inline-style to the input in line 9:
$('#input').css('border', '1px solid #454545');
Inline-styles override styles defined within the stylesheet.
A quick fix would be to add !important to your CSS:
#input:focus {
outline: none;
border: 1px solid #96f226 !important;
}
That works, but it's more of a hack.
If I understand correctly, you're adding the inline-style to remove the red border after an error. A better way to do this would be to simply remove the inline-style. That would sort out the conflict and you wouldn't need to add the !important hack. Replace line 9 in your jQuery with the following:
$('#input').css('border', '');
I have a default ASP.NET Dropdown, and it is rendered with a select tag id of "Countries".
I'd like the background of the drop-down to be transparent to match with the background of the page, and also like to keep make the default border disappear as well, so it blends well with the background. The list items can have the white background. I have an image of a custom arrow that i'd like to use instead of the default one that is used to click on the drop-down.
On hovering over the drop-down list items, I'd like the background of the item to be yellow, and the font color should always be black.
I'd like to use CSS 2.1 as much as possible for this, but if it's too complex then I'm willing to use javscript or jquery.
Below is the rendered markup, and some custom styles I've been trying to write. I also think some of the styles are overwritten by some default ones. Any help to finish this styling would be greatly appreciated. Thanks
<select name="ContriesDropdown" class="Select.SmallSelect" id="Countries" style="width: 100px; background-color: white;" onblur="try{FormUtils_ElementErrorReset(this);}catch(e){}" onchange="Send(this.value);">
<option value="1">Country1
<option value="2">Country2
*CustomCss*
#Countries { position:absolute; display:inline; top:6px;}
#Countries {background-color:transparent; vertical-align: middle; color: #44586D; border: 0px transparent; display: inline;padding:2px;}
#Countries Option:hover { color:black; background-color:Yellow; }
Try This.
select
{
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(../images/select-arrow.png), -webkit-linear- gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
color: #555;
font-size: 10pt;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
font-family: Cambria;
}
The default ASP.Net controls are very limited when it comes to styling. You should try using external controls like the JQuery UI dropdown instead.
http://jqueryui.com/autocomplete/#combobox
How do we use just CSS to achieve the effects shown in this image: http://i.stack.imgur.com/smWmQ.gif (I'm sure that image is created with CSS because I visited that site with images disabled in Chrome)
Here is a simple very efficient way of doing it.
Fiddle
UPDATE:
Here is an example:
the html
<div>
<span class='tip'></span>
</div>
the css
div {
height: 30px;
width:50px;
}
.tip {
display:block;
width:1px;
heigth:20px;
border-left: 30px solid #fff;
border-right: 30px solid #fff;
border-top: 25px solid #F00;
}
There is something similar I took from the jQuery Ketchup plugin.
The CSS looks like this:
.box span {
border-color: rgba(255, 0, 0, 0.6) transparent -moz-use-text-color;
border-left: 0 solid transparent;
border-right: 15px solid transparent;
border-style: solid solid none;
border-width: 10px 15px 0 0;
display: block;
height: 0;
margin-left: 10px;
width: 0;
}
.box ul {
background: none repeat scroll 0 0 rgba(255, 0, 0, 0.6);
border-radius: 5px 5px 5px 5px;
color: #111111;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
line-height: 16px;
list-style: none outside none;
margin: 0;
padding: 10px;
text-align: left;
}
The according HTML:
<div class="box">
<ul>
<li>Content</li>
</ul>
<span></span>
</div>
Also have a look at the JSFiddle.
The triangle you see is just a box, often with no size, with really degenerate and different border-widths. For example to make an upward-pointing triangle, you would make a make a box like so:
top
_____
left| / \ |right
|/___\|
bottom
The box has no size, a top-border-width of 0, and non-zero values for the other widths. The border-color of the left and right and top are transparent, so you can't see those triangles. All you can see is the bottom border.
Working example: http://jsfiddle.net/NnGyv/
Unfortunately, you cannot use percentages with border widths, or else you could achieve a reusable CSS class definition.
Most browsers can do this automatically with HTML5 validation. You won't have much control over how it looks but it's 1000x easier to code and works without Javascript.
If you want more visual control there's jQuery Tools Validator. Although this uses Javascript it should fall back to HTML5 if Javascript is disabled.
The original site may be using HTML5.
HTML5 has some pretty neat features for client-side form validation. This looks very much like Chrome's take on an input box with the "required" attribute set. You'll also note a placeholder (another HTML5 attribute).
jsFiddle example. You can find out more information from Dive into HTML5.