The background color, font color and border are being lost when I drop an element.
How do I keep these properties intact? Here is the project in jsFiddle:
http://jsfiddle.net/n2learning/tV4n7/48/
Thanks!
Just needed a minor change to your CSS. I've removed the #routinefilter from this rule so it applies to all .droptrue elements, no matter what their parent element is:
.droptrue{
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Here's the working example.
Your CSS rule:
#routinefilter .droptrue{
only applies to elements with a class droptrue WHILE they are in the container routinefilter. Once you drop them in the box, they are no longer inside routinefilter and the rule doesn't apply. Try changing that to just:
.droptrue{
Your CSS selector was specific to the point of origin, but not to the dropping-point. Add #dropTargetframe .droptrue to your selector, to give:
#routinefilter .droptrue,
#dropTargetframe .droptrue {
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Updated JS Fiddle.
Or you could simply remove the ancestor id from the selector, to give simply:
.droptrue {
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
Updated JS Fiddle demo.
This should do the trick.
#routinefilter .droptrue, #dropTargetframe .droptrue{
background: lightgray;
color: navy;
margin:10px;
padding:5px;
border:2px solid #666;
}
The .droptrue elements will keep the same css style when inside the box as well!
Edit:
You can also change it to only .droptrue if you want those boxes to use this style wherever they are.
Change
#routinefilter .droptrue
into
.droptrue
Edit: Whoops, too late :)
Add to CSS
.droptrue
{
font: 16px serif
background: none repeat scroll 0 0 lightgray;
border: 2px solid #666666;
color: navy;
margin: 10px;
padding: 5px;
}
Related
How can I highlight all spans and divs in my html that have classes that are not styled? this is for debugging purposes, to remind me what I will still have to fix up.
Use border to highlight the span and div elements
Do either:
span, div{
border: 1px solid red;
background-color: yellow;
}
Or:
.unstyledClassOfDivAndSpan{
border: 1px solid red;
}
I would add an XXX class to all the elements, then use this definition:
.XXX {
border: 5em solid red;
background-color: green;
}
Make sure this is at the end of the stylesheet so it doesn't get overridden. Then as elements are done, remove the XXX class.
Please Use this Css Hover Style for highlight all spans and divs in your html
div, span{
border: 1px solid red;
background-color: Black;
}
div:hover, span:hover{
border: 1px solid Black;
background-color: red;
}
OR
*Please Use this Css and Jquery Hover Function for highlight all spans and divs in your html*
.hilight{
border: 1px solid red;
}
$(function(){
$("spna div").hover(function(){
$(this).toggleClass("hilight");
});
});
I have the following problem, i need the "ul[editable] li" class to be dominant over "#menu li". I know I can use !important as follows:
#menu li {
border:solid 1px #9f693a;
outline:solid 1px #89552a;
background:url(images/bg.png);
}
ul[editable] li {
background-color: #333333 !important;
border-color: #0d0d0d !important;
color:#fff !important;
}
I want to say something like this:
ul[editable] li !important {
....
}
Is there a way to do this?
Thanks!
Nope, you cannot use the !important statement in the selector. The only thing you can do is make the second selector more specific, (Or the first one less specific of course).
For example:
#menu li {
border:solid 1px #9f693a;
outline:solid 1px #89552a;
background:url(images/bg.png);
}
#container ul[editable] li {
background-color: #333333;
border-color: #0d0d0d;
color:#fff;
}
I guess you already knew this though. :)
How can I make all links inside a given div change color when the mouse is inside the div?
I have this set up:
nav.main {
border: 1px dashed black;
width: auto;
height: auto;
overflow: hidden;
list-style: none;
}
nav a {
color: black;
text-decoration: none;
}
div.button:hover, a:hover {
position:relative;
background:#000000;
color: white;
}
This does exactly what I want it to do, but it will only change the link color when you're hovering over the LINK itself, instead of changing the link colors when the mouse is inside the div.
How do I fix this?
change the last one from div.button:hover, a:hover to div.button:hover a. This will not require at least one link to be hovered, just the div.
Example: http://jsfiddle.net/GBzbp/
div.button:hover, a:hover {
position:relative;
background:#000000;
color: white;
}
to:
div.button:hover a {
position:relative;
background:#000000;
color: white;
}
Change your last style. Remove the comma and the second :hover, thusly:
div.button:hover a
I'd need to see your HTML to be sure, but I think you just need to change the third selector to this:
div.button:hover a {
position:relative;
background:#000000;
color: white;
}
This question already has answers here:
How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]
(11 answers)
Closed 7 years ago.
I have seen that chrome puts a thicker border on :focus but it kind of looks off in my case where I've used border-radius also. Is there anyway to remove that?
You should be able to remove it using
outline: none;
but keep in mind this is potentially bad for usability: It will be hard to tell whether an element is focused, which can suck when you walk through all a form's elements using the Tab key - you should reflect somehow when an element is focused.
I had to do all of the following to completely remove it:
outline-style: none;
box-shadow: none;
border-color: transparent;
Example:
button {
border-radius: 20px;
padding: 20px;
}
.no-focusborder:focus {
outline-style: none;
box-shadow: none;
border-color: transparent;
background-color: black;
color: white;
}
<p>Click in the white space, then press the "Tab" key.</p>
<button>Button 1 (unchanged)</button>
<button class="no-focusborder">Button 2 (no focus border, custom focus indicator to show focus is present but the unwanted highlight is gone)</button>
<br/><br/><br/><br/><br/><br/>
To remove the default focus, use the following in your default .css file :
:focus {outline:none;}
You can then control the focus border color either individually by element, or in the default .css:
:focus {outline:none;border:1px solid red}
Obviously replace red with your chosen hex code.
You could also leave the border untouched and control the background color (or image) to highlight the field:
:focus {outline:none;background-color:red}
:-)
This will definitely work. Orange outline won't show up anymore..
Common for all tags:
*:focus {
outline: none;
}
Specific to some tag, ex: input tag
input:focus{
outline:none;
}
border:0;
outline:none;
box-shadow:none;
This should do the trick.
The simpliest way is to use something like this but note that it may not be that good.
input {
outline: none;
}
I hope you find this useful.
you could just set outline: none; and border to a different color on focus.
Problem is when you already have an outline. Chrome still changes something and it's a real pain. I cannot find what to change :
.search input {
outline: .5em solid black;
width:41%;
background-color:white;
border:none;
font-size:1.4em;
padding: 0 0.5em 0 0.5em;
border-radius:3px;
margin:0;
height:2em;
}
.search input:focus, .search input:hover {
outline: .5em solid black !important;
box-shadow:none;
border-color:transparent;;
}
.search button {
border:none;
outline: .5em solid black;
color:white;
font-size:1.4em;
padding: 0 0.9em 0 0.9em;
border-radius: 3px;
margin:0;
height:2em;
background: -webkit-gradient(linear, left top, left bottom, from(#4EB4F8), to(#4198DE));
background: -webkit-linear-gradient(#4EB4F8, #4198DE);
background: -moz-linear-gradient(top, #4EB4F8, #4198DE);
background: -ms-linear-gradient(#4EB4F8, #4198DE);
background: -o-linear-gradient(#4EB4F8, #4198DE);
background: linear-gradient(#4EB4F8, #4198DE);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4EB4F8', endColorstr='#4198DE');
zoom: 1;
}
at the top of my css file i say:
* {
border:none;
margin:0;
padding:0;
}
but i want to have text input boxes to have a border so a few lines down i say:
input[type="text"] {
border-width:1px;
border-style:solid;
border-color: black;
}
No luck! Am I missing something about how CSS works? Doesn't the input declarations override the *?
You need to specify a border-style as well. By default, it is none. You probably want solid:
input[type="text"] {
border-width: 1px;
border-color: black;
border-style: solid;
}
Or shorthand:
input[type="text"] {
border: 1px solid black;
}
I think input[type="text"] is not supported by all browsers.
If it is IE6 you cannot do attribute selectors.
http://dev.l-c-n.com/CSS3-selectors/browser-support.php
The input="text" was not specified for my input elements
D'OH!
What if you give the input-tag a class, and refers that class in the CSS.
And why do you have *{border: none;}? Is it because you don't wan't the borders to be shown around the images? Because then you could use the img{botder: none;} instead, and not have the problem...