I have a textarea with border attributes :
#my_textarea{
border-color: #EEEEEE;
border-style: solid;
border-width: 2px;
width: 95%;
min-height: 550px;
padding: 30px;
margin-top: 28px;
/* Text style */
font-family: Times-Italic;
font-size: 19px;
color: #717171;
line-height: 27px;
text-align: left;
resize: none;
}
I want the text inside this textarea to have opacity. But when I set opacity: 0.5; it also affects the border.
How to set opacity only on text inside textarea and not text + border ?
Just use an RGBA text color
color: rgba(113,113,113,0.5);
body {
background: lightgreen;
}
#my_textarea {
border-color: #EEEEEE;
border-style: solid;
border-width: 2px;
width: 95%;
min-height: 100px;
padding: 30px;
margin-top: 28px;
/* Text style */
font-family: Times-Italic;
font-size: 19px;
color: rgba(113, 113, 113, 0.5);
line-height: 27px;
text-align: left;
resize: none;
}
<div id="my_textarea">
<p>Lorem ipsum dolor sit amet.</p>
</div>
Using an RGBA value for your color should fix the problem you have.
Below is an example.
body {
background: red;
}
#my_textarea {
border-color: #EEEEEE;
border-style: solid;
border-width: 2px;
width: 95%;
min-height: 550px;
padding: 30px;
margin-top: 28px;
font-family: Times-Italic;
font-size: 19px;
line-height: 27px;
text-align: left;
resize: none;
color: rgba(113,113,113, 0.5);
background: transparent;
}
<textarea id="my_textarea">Lorum Ipsum</textarea>
Generator
Expanding what #Paulie_D said you should set opacity as rgba color for text:
#my_textarea{
rgba(113, 113, 113, 0.5); //instead of #717171
}
Also there is a nice hex-> rgba color converter
An alternative solution to complement the other answers, for IE8 (if required - as RGBA is not supported by it) would be to have a wrapper element around the textarea and use opacity instead of RGBA color:
body {
background: red;
}
.foo {
border-color: #EEEEEE;
border-style: solid;
border-width: 2px;
}
#my_textarea {
width: 95%;
min-height: 550px;
padding: 30px;
margin-top: 28px;
font-family: Times-Italic;
font-size: 19px;
line-height: 27px;
text-align: left;
resize: none;
background: transparent;
color: #717171;
opacity: 0.5;
}
<div class="foo">
<textarea id="my_textarea">Lorum Ipsum</textarea>
</div>
Related
This question already has answers here:
I want to add a border to my button on hover event without moving the button or anything [duplicate]
(7 answers)
Closed 6 years ago.
My idea is to add a colored border to the submit button when the user hovers it.
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
}
button:hover {
border: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
But the immediately following text then becomes shifted downwards.
How can I get rid of these "Jumping" text while simultaneously having the border?
You need to define transparent border by default on button and change border-color on hover. Further avoid changing font-weight property on hover as well as it will also expand the width and height of button and it will jump on hover.
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border: 6px solid transparent;
font-weight: 800;
border-radius: 4px;
padding: 5px 10px;
}
button:hover {
border-color: crimson;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
Add "margin" attributes to your "button" CSS like so:
button {
border-radius: 4px;
padding: 5px 10px;
margin: 4px 0;
}
button:hover {
border: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
margin: 0;
}
From Stop an element moving with padding on hover.
Just to give an alternative you could use outline to set the "border" on hover.
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border: 0;
border-radius: 4px;
padding: 5px 10px;
margin: 5px 0;
}
button:hover {
outline: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
Another option:
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
margin: 6px 0;
border-width: 2px;
border-style: outset;
border-color: buttonface;
}
button:hover {
border-width: 6px;
border-style: solid;
border-color: crimson;
font-weight: 800;
margin: 2px 0;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
Here are some possibilities:
Style the button dimensions (padding/margin/border) with the same px/em values like it's :hover state
set the button position to absolute/fixed
Use a fix height in a parent div
check now
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
border: 6px solid transparent;
}
button:hover {
border: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
Try adding height to button
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
height:40px
}
button:hover {
border: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
Add padding of the same size as the border to the button, and remove it on hover.
Mention the width and height to the button and remove the font-weight to avoiding a shifting of the element when hover the elements. Check below code.
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
height:50px;
width:100px;
}
button:hover {
/*font-weight: 800;
background-color: white;*/
border: 6px solid crimson;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
height:50px;
width:100px;
}
button:hover {
border: 6px solid crimson;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
I'm using a css speech bubble generator to generate a speech bubble, but when I hover over the speech bubble, the speech bubble needs to change to be white. The little arrow bit that sticks out however is not changing to be white.
Code:
styling in the php code:
<style>
.bubble
{
position: relative;
width: 250px;
height: 65px;
padding: 0px;
background: #ff8282;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 0 15px 24px;
border-color: transparent #ff8282;
display: block;
width: 0;
z-index: 1;
margin-top: -15px;
right: -24px;
top: 50%;
}
#go-button:hover .bubble:after {
border-color: #ffffff;
background: #ffffff;
}
.bubble:hover {
border-color: #ffffff;
background: #ffffff;
}
.bubble:hover .bubble:after {
border-color: #ffffff;
background: #ffffff;
}
</style>
html:
<div type="submit"
value="GO"
id="go-button"
class="bubble">
</div>
In a seperate stylesheet:
#go-button,
#add-go-button,
#show-shops-button,
#show-comments-button,
#edit-product-button {
font: 200 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
border-radius: 6px;
height: 64px;
text-decoration: none;
width: 100%;
background-color: #ff8282;
padding: 12px;
border: 0px solid #fff;
color: #fff;
cursor: pointer;
}
#go-button h5,
#add-go-button h5 {
font-size: 16px;
font-weight: 200;
}
#go-button:hover,
#add-go-button:hover,
#try-now-button:hover {
text-decoration: none;
background-color: #fff;
color: #fc4747;
}
image of problem:
How come the arrow bit of the speech bubble is not changing to white when hovering over the #go-button div (the rectangular portion of the speech bubble is turning white when hovering - just not the arrow portion)?
Change this
#go-button:hover .bubble:after {
border-color: transparent #ffffff;
}
to
#go-button.bubble:hover:after {
border-color: transparent #ffffff;
}
Here you go:
jsFiddle
just change:
#go-button:hover .bubble::after {
border-color: #ffffff;
background: #ffffff;
}
to:
#go-button:hover:after {
border-style: solid;
border-width: 15px 0 15px 24px;
border-color: transparent #ffffff;
}
No need to use class from same element that you used ID for hovering after.
Following the below instructions should fix the issue.
Remove
#go-button:hover .bubble:after {
border-color: #ffffff;
background: #ffffff;
}
Replace
.bubble:hover .bubble:after {
border-color: #fff;
background: transparent;
}
With
.bubble:hover::after {
border-color: #fff;
background: transparent;
}
Hope it helps
1)I want to change "submit" button border in circle shape as below image as here
.submit1 {
background: #ff7704 none repeat scroll 0 0;
border: medium none;
border-radius: 0;
color: #fff;
font-size: 23px;
font-weight: bold;
padding: 8px;
min-width: 140px;
}
Add border-radius to round shape.
.submit1 {
background: #ff7704 none repeat scroll 0 0;
border: medium none;
border-radius:8px;
color: #fff;
font-size: 23px;
font-weight: bold;
padding: 8px;
min-width: 140px;
}
Just add border-radius as required
.submit1 {
background: #ff7704 none repeat scroll 0 0;
border: medium none;
border-radius: 5px;
color: #fff;
font-size: 23px;
font-weight: bold;
padding: 8px;
min-width: 140px;
}
<button class="submit1">
Upload Picture
</button>
Try this one
You just want to add border-radius: 50px;
.submit1 {
background: #ff7704 none repeat scroll 0 0;
border: medium none;
border-radius: 50px;
color: #fff;
font-size: 23px;
font-weight: bold;
padding: 8px;
min-width: 140px;
}
<button class="submit1">Submit</button>
you need to put a container div to your button,
<div style="border:5px solid gray;background-color:gray;max-width: 140px;">
<input type="button" class="submit1" value="submit" />
</div>
css
.submit1 {
background: #ff7704 none repeat scroll 0 0;
border: medium none;
border-radius: 10px;
color: #fff;
font-size: 23px;
font-weight: bold;
padding: 8px;
min-width: 140px;
}
Use like this, and use correct image, i just put sample image from online
<!DOCTYPE html>
<html>
<style>
.submit1 {
background-color: #ff7704;
border: medium none;
border-radius: 10px;
color: #fff;
font-size: 23px;
font-weight: bold;
padding: 15px;
padding-right:70px;
min-width: 140px;
background-image:url('http://troncell.com/images/hdsp/ht-icon-1.png');
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
</style>
<body>
<button class="submit1">Upload Picture</button>
</body>
</html>
I have created a html code with css which displays the image 1 below (left image). What I want to accomplish is that when you hover with your mouse over image 1, I want the image 2 (Right picture) to appear (do not mind the difference in sizes).
HTML:
<body>
<div class="borderbox">
<h3 class="header-3">+</h3>
<p class="paragraph-text">visa fler bästsäljare</p>
</div>
</body>
CSS:
.borderbox {
border-style: dashed;
border-width: 2px;
border-color: #d3d3d3;
position: absolute;
height: 362px; !important
width: 241px; !important
top: 0;
left: 0;
margin-right: 5%;
}
h3.header-3 {
font-size: 130px;
text-align: center;
color: #00a0df;
margin: 4px auto 17px;
}
p.paragraph-text {
font-size: 20px;
text-align: center;
color: #00a0df;
text-transform: uppercase;
font-family: inherit; font-weight: bold;
}
How can I implement this to my CSS, when you hover with your mouse over the Image 1 I want it to switch colour (image 2). The colour code for the blue is #00a0df.
URL to my website
Add color: #00a0df; to borderbox and change your text's color to color: inherit. Then on hover you can change the background-color, text color, border color and anything else you want:
.borderbox {
border-style: dashed;
border-width: 2px;
border-color: #d3d3d3;
position: absolute;
height: 362px; !important
width: 241px; !important
top: 0;
left: 0;
margin-right: 5%;
color: #00a0df; //add
}
h3.header-3 {
font-size: 130px;
text-align: center;
color: inherit; //change
margin: 4px auto 17px;
}
p.paragraph-text {
font-size: 20px;
text-align: center;
color: inherit; //change
text-transform: uppercase;
font-family: inherit; font-weight: bold;
}
.borderbox:hover{
background-color: #00a0df;
color: #FFF;
border-color: #FFF;
}
FIDDLE
http://jsfiddle.net/mk7hrs49/3/
In order to get the white border you want when you hover over it.
Just add border color:
.borderbox:hover{
background-color: #00a0df;
color: #FFF;
border-color: white; <---
}
cheers
You can use the CSS :hover pseudo-class, which changes the style when the mouse is hovering over the element. Apply the colors you want (backround and font colors) to the hover attribute which will override the default (non-hovered) style. If you put the font and background color in the .borderbox class, then all you need is to override these in a .borderbox:hover like so:
.borderbox:hover {
background-color: #00a0df;
color: white;
}
The full example follows:
.borderbox {
border-style: dashed;
border-width: 2px;
border-color: #d3d3d3;
color: #00a0df;
position: absolute;
height: 362px; !important
width: 241px; !important
top: 0;
left: 0;
margin-right: 5%;
}
.borderbox:hover {
background-color: #00a0df;
color: white;
}
h3.header-3 {
font-size: 130px;
text-align: center;
margin: 4px auto 17px;
}
p.paragraph-text {
font-size: 20px;
text-align: center;
text-transform: uppercase;
font-family: inherit; font-weight: bold;
}
<body>
<div class="borderbox">
<h3 class="header-3">+</h3>
<p class="paragraph-text">visa fler bästsäljare</p>
</div>
</body>
You should use the :hover Pseudoclass. If this is new to you, check out the explanations on W3Schools. Your code should look like that afterwards:
.borderbox:hover {
#Here comes all your css on hover
background-color: #00a0df;
}
Hope this solves your problem. :-)
So, it's pretty easy to set a hover over effect for an element. But what I want is when the user hovers over a button that has text in it, to make the button turn from black to white and the text from white black at the same time. Instead of two separate elements. How should I do this?
Thanks!
#signUpBox {
width: 150px;
height: 47px;
border-style: solid;
border-width: 1px;
margin: auto;
margin-top: 25px;
border-radius: 2px;
}
#signUpBox:hover {
background-color: #ffffff;
}
h3 {
text-align: center;
margin-top: -35px;
letter-spacing: 1px;
font-size: 17px;
}
I'm not sure how you have the code set up but this would work on a div with an onclick function attached as a button:
#signUpBox {
width: 150px;
height: 47px;
border: solid 1px #000;
margin: auto;
margin-top: 25px;
border-radius: 2px;
color:#000;
background:#fff;
}
#signUpBox:hover {
background: #000;
color:#fff;
}
HTML:
<div id="signUpBox">This is a test</div>
DEMO
#signUpBox:hover {
background-color: #ffffff;
color:#000000;
}
you can do
#signUpBox:hover h3 {
color: #000;
}
JSFIDDLE
change text color using color property on hover.
#signUpBox:hover {
background-color: black;
color: white;
}
Here is a demo.
#signUpBox {
width: 150px;
height: 47px;
border-style: solid;
border-width: 1px;
margin: auto;
margin-top: 25px;
border-radius: 2px;
background: #000000;
color: #FFFFFF;
}
#signUpBox:hover {
background: #ffffff;
color: #000000;
cursor: pointer;
}
Fiddle