We can make HTML elements editable by using the contentEditable="true" attribute:
<div contentEditable="true">
This text can be edited by the user.
</div>
JS Fiddle
How can I make the blue box surrounding the element go away when the user edits the content?
I've tried using the :active and :hover pseudo-classes (along with border: none) to no avail.
This is not border but outline which you see on focus. You can try this:
div[contentEditable] {
outline: none;
}
Demo: http://jsfiddle.net/bxmr6gzg/1/
Related
I have a <button> element which has been centered into the middle of the page with an anchor tag wrapped around it like seen in this JSFiddle.
From the JSFiddle if you hover your mouse on either side of the button the link is active. I could prevent this by wrapping it around a <div> and then apply this to the <div>:
div {
display: block;
margin: 0 auto;
}
However is there a better solution to this as in my case, I have many buttons like this and it would take long to apply? Thanks.
Are you referring to the space within the button, besides the "A Button" text, because I don't see any clickable area outside of the button. If so, I think that's just a function of the button tag. When I hover over the button, it highlights blue but my cursor doesn't change, like it should when I hover over a link.
If you throw the a href tag within the button, you'll get the cursor to change when you hover over the button's text. However, the button will still highlight button when you cursor is over the empty space within the button.
Also, what are you using the links for? Instead of hyperlinking the button, you might want to use the URL attribute within the button tag, if you're trying to use the button to send information somewhere.
The best solution to this was to just wrap the button with a form like so:
<form action="link-to-page-here">
<button>Button</button>
</form>
Using this, I can still center the button using:
button {
display: block;
margin: 0 auto;
}
But avoiding the link being clickable on the row of the button.
You shouldn't put a <button> inside of an <a> tag
just use the <button></button> and use the same style you've written for the button tag, so it should be something like that:
button {
display: block;
margin: 0 auto;
}
If you have to use the wrong markup and keep the button inside the <a> tag
just wrap the a tag inside a div tag and change styles to the following
<div>
<a href="">
<button>A Button</button>
</a>
</div>
and styles:
a{
display: inline-block;
margin: 0 auto;
}
div{
text-align: center;
}
button{
}
Why does <button> always have its text vertically aligned but not.. Say, an anchor tag that is using the same styles?
Same styles meaning both have same display, padding, line height, text-align and vertical-align. But as soon as I change the tag from <button> to <a>, it breaks, text is no longer vertically-aligned
This is tough to figure out. I even went to check the webkit-core to find answers. I checked what does the <button> element has and copied it out.
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
This guy says <button> is styled differently but how?
Button's text vertical align
Can someone tell me how exactly is a <button> is rendered by a browser?
Were you going for something like this?
HTML
<button>...</button>
<br>
<a>...</a>
CSS
button {
-webkit-appearance: button;
}
a {
padding: 2px 8px;
-webkit-appearance: button;
}
Link to fiddle: Fiddle
I'm trying to make a button without a link, as the background is already linked. Therefore you should be able to cick through it. I know about pointer-events:none but when using this, the div's :hover won't work anymore.
Is there any way to achieve this?
My HTML is:
<div class="button">
<span>Click here</span>
</div>
CSS:
.button { pointer-events: none; }
.button:hover { ... }
The "button" class should have an :hover effect + click through. This setup won't show the :hover effect.
Without seeing your code I would suggest one of two routes:
1) Just link both. No bigs.
2) Link your background via javascript. If the button is a child element, the click event will bubble to your linked background.
I want to hide a div element on mouse over only using css.
<div>Stuff shown on hover</div>
div {
display: block;
width:100px;
height:100px;
border: solid black;
}
div:hover {
display: none;
}
Why that doesn't work?
if I want to change -for example- the background instead it works just fine:
div:hover {
background-color: red;
}
Is not possible to hide/show the same element which I'm applying the hover selector?
http://jsfiddle.net/link01/TknA8/
Why that doesn't work?
Isn't that obvious ...?
The Div element is displayed.
You move your mouse over it - which puts it in its :hover state.
You say that for its :hover state, the element is to be removed completely from the rendered output.
Since it is now "not there any more", the mouse can't still be over it.
Mouse not over it any more means, element is no more in :hover state.
What does your CSS say again for the element when it is not in its :hover state?
Ah yes, display:block.
OK, browser renders the element again.
Hey, what's that, that freaking mouse is over it?
Let's see, that means it has to be removed again ...
When an element has its display set to none it doesn't exist in the layout and therefore can't be interacted with with the mouse.
Just add a wrapper around it:
<div class="wrapper">
<div class="hidden">Stuff shown on hover</div>
</div>
http://jsfiddle.net/cecAn/
With regard to the following markup:
<div class="mydiv">
<img src="myimage.gif" />
</div>
The div.mydiv is basically styled to be a pretty rounded edge box around the image specified within the link. Lets say its background-color starts as black.
I would like to make it so that when I :hover over myimage.gif, the style of div.mydiv changes the background-color to, lets say, yellow.
How can I specify the style of div.mydiv when a nested <a> is being hovered over?
Use
.mydiv:hover
{
background-color:yellow;
}
in a CSS file, assuming you have one. I don't think there's a way to do this inline.