I am trying to change the color of the selection around my textbox when a user is inputting data. Right now when the user selects it on my machine it becomes blue. I would like this to be red. Is it possible to change the color of the selection around a focused textbox? I tried using -moz-selection and selection in my css but it doesnt work.
#myTextBox {
border: 3px solid gray;/*background img not available, added border to see textbox*/
background: transparent url(IMAGEHERE.png);
width: 368px;
height: 33px;
color: silver;
font-size: 22px;
padding-left: 10px;
}
::-moz-selection {
background-color: #dd2020;
color: #fff;
}
::selection {
background-color: #dd2020;
color: #fff;
}
jsFiddle
Try this code:
#myTextBox {
border: 3px solid gray;
width: 368px;
height: 33px;
color: silver;
font-size: 22px;
padding-left: 10px;
border:2px solid red;
border-radius:7px;
font-size:20px;
padding:5px;
}
#myTextBox:focus{
outline:none;
border-color:blue;
box-shadow:0 0 10px blue;
}
DEMO
It changes red to blue on focus.
Related
How to add border bottom on hover effect as in this image
Add :hover for your button like this:
button {
width: 300px;
height: 60px;
border-radius: 10px;
background-color: #d94346;
border: none;
color: white;
font-weight: bold;
font-size: 1.3rem;
}
/* Add hover effect */
button:hover {
border-bottom: #bb262a 6px solid;
}
<button>Hover</button>
Is this result what you were expecting for ?
A box-shadowwould be more appropriate in my opinion.
EDIT: Comparing to the other answers I see, this way the button text won't move. 2 options.
button {
font-size: 30px;
padding: 30px 250px;
color: white;
background-color: #d84446;
border: none;
border-radius: 15px;
}
button:hover {
box-shadow: 0px 7px 0px #bb262a;
cursor: pointer;
}
<button>Hover</button>
you should do it in the other order
button:hover {
border-bottom: 4px solid #bb262a;
}
I can't change border color when the input field is active. I tried using input:active, input:focus. What I want is the color of input's border to change when user clicks on it.
The CSS code :
input {
margin-top: 20px;
border-radius: 0px;
background-color: #FFFFFF;
border: 1px solid black;
height: 33px;
width: 200px;
&:active {
font-size: 13px;
border: 2px solid Red;
background-color: #ffffff;
}
&:disabled {
border: 1px #Black;
border-radius: 0px;
background-color: #F9FAFB;
}
HTML Code:
<div class="container">
<form>
<label for="input-field">Text</label>
<input type="text" placeholder="...">
<button>..</button>
</form>
</div>
So this is a few things, your css isn't valid, you've written scss syntax. If you're aware of this and the question is meant to say "scss", then you need to add outline: none;. Also #black isn't a valid colour.
Example in scss:
input {
margin-top: 20px;
border-radius: 0px;
background-color: #FFFFFF;
border: 1px solid black;
height: 33px;
width: 200px;
&:active, &:focus { // I think you said you wanted focus as well
font-size: 13px;
border: 2px solid red;
outline: none; // add this
background-color: #ffffff;
}
&:disabled {
border: 1px solid black; // update this
border-radius: 0px;
background-color: #F9FAFB;
}
}
In css:
input:active, input:focus { // I think you said you wanted focus as well
font-size: 13px;
border: 2px solid red;
outline: none; // add this
background-color: #ffffff;
}
You can't use the & in regular css.
#Black isn't a css colour value.
You need outline: none to override the browser's default focus behaviour.
I've been having trouble all day with these buttons. First, both buttons were on top of each other looking like this, http://i.imgur.com/wVmntpQ.jpg and now after posting here asking what to do, it looks like this now, http://imgur.com/OmXDQct
I was told to change in my css from this :
CSS:
button {
float:left;
margin-top:250px;
color:white;
display: block;
margin: 30px;
padding: 7px 35px;
font: 300 150% langdon;
background: transparent;
border: 3px solid white;
cursor: pointer;
}
button:hover {
background: black;
border: 1px solid black;
}
button:active {
background: #2e2e2e;
border: 1px solid black;
color: white;
}
I guess you just need to add position:relative to the div which contains the buttons, so make it like this:
HTML
<div style="position: relative;">
GO ROAM</br>
START HERE.
<button>SIGN UP</button>
<button>LOG IN</button>
</div>
Hope this will help you ...
Ok, here is the working code on jsfiddle. I have removed the absolute path from the buttons and added display: inline-block; so now they're one next to the other. I have also added the top: 250px declaration in the wrapper.
button {
color:white;
display: inline-block;
margin: 30px;
padding: 7px 35px;
font: 300 150% langdon;
background: transparent;
border: 3px solid white;
cursor: pointer;
}
button:hover {
background: black;
border: 1px solid black;
}
button:active {
background: #2e2e2e;
border: 1px solid black;
color: white;
}
I have two buttons, that I would like to have one on top, and one on the button of each other, how ever when I went to see how they looked, both buttons were inside of each other, I Cant seem to find the issue, but here's my code.
CSS
body { font-size: 16px; width: 600px; margin: 25px auto; }
button {
color:white;
display: inline;
margin: 30px;
padding: 7px 35px;
font: 300 150% langdon;
background: transparent;
border: 3px solid black;
cursor: pointer;
}
button:hover {
background: #f7f7f7;
border: 1px solid #8b8b8b;
}
button:active {
background: #2e2e2e;
border: 1px solid black;
color: white;
}
Currently the buttons show side by side: see this fiddle.
If you want the next button on a new line, then use display:block see this fiddle.
Ok, so I seen this on one of my applications I just bought and now I am wanting to do it with my forms. It appears the labels are actually inside the inputs.
http://i1309.photobucket.com/albums/s627/mievan123/This_zps1884e41d.png
I know you can use placeholders but they disapear once you start typing in the field. I want it to stay like the image above. I typed "Mr." before I took the picture in the Title field.
What's the secret!!!!
label {
border: 1px solid black;
border-radius: 5px;
margin-bottom: 5px;
border-bottom: 1px solid #669244;
background: #669244;
color: #ddd;
padding: 11px 10px;
}
input {
border: 0;
color: black;
font-size: 14px;
background: #669244;
}
textarea {
border: 0;
color: black;
font-size: 14px;
background: #669244;
}
You can surround the input element with another element that has the border and the "label" and remove the border from the input.
label {
border: 1px solid black;
border-radius: 5px;
color: gray;
padding: 5px;
}
input {
border: 0;
color: black;
}
http://jsfiddle.net/ExplosionPIlls/JjasN/1/