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/
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 am making a modal view, using bootstrap framework, as shown in the figure , these are two buttons , I want hover effect when , mouse points on, using CSS but it isn't working,
#yesbut,#nobut {
width: auto;
height: auto;
display: inline-block;
padding: 10px 35px;
text-align: center;
background: #2e6c96;
color: #fff;
font-size: 16px;
text-decoration: none;
border: 1px solid #2e6c96;
outline: none;
text-transform: uppercase;
}
#yesbut :hover{
background: #fff;
border: 1px solid #fff;
}
#nobut :hover{
background: #fff;
color: #2e6c96;
border: 1px solid #fff;
}
<div id="yesbut" >YES</div>
<div id="nobut">NO</div>
enter image description here
#yesbut :hover{ /*Remove the space*/
background: #fff;
border: 1px solid #fff;
}
You got error in selectors corrected is:
#yesbut:hover{
background: #fff;
border: 1px solid #fff;
}
without space between #yesbut/#yesno and :hover.
Space mean you are targeting elements inside that particular element e.g. children of #yesbut.
You need to remove the spaces. If you put a space before the pseudo-class it means that you want to select a child of e.g. #yesbut instead of the element itself.
#yesbut,#nobut {
width: auto;
height: auto;
display: inline-block;
padding: 10px 35px;
text-align: center;
background: #2e6c96;
color: #fff;
font-size: 16px;
text-decoration: none;
border: 1px solid #2e6c96;
outline: none;
text-transform: uppercase;
}
#yesbut:hover{
background: #fff;
border: 1px solid #fff;
}
#nobut:hover{
background: #fff;
color: #2e6c96;
border: 1px solid #fff;
}
<div id="yesbut" >YES</div>
<div id="nobut">NO</div>
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.
Saw this image on dribbble. How would I create this effect in CSS? I'm referring to the two input fields being almost merged and having a not-full-width divider between them.
Something like this:
#inputwrap {
border: 1px solid #aaa;
background: #fff;
width: 180px;
padding: 10px;
margin: 20px;
}
#inputwrap input {
border: none;
width: 160px;
padding: 5px 10px;
outline: none;
}
#inputwrap input:first-child {
border-bottom: 1px solid #aaa;
}
http://jsfiddle.net/2tHfG/