I want to remove the white color totally.
Before selecting the suggestions
After choosing one of the suggestions
input[type="search"] {
-webkit-appearance: none !important;
background-clip: padding-box;
background-color: black;
vertical-align: middle;
border-radius: 2rem;
border: 2px solid #1de9b6;
font-size: 1rem;
width: 100%;
line-height: 2;
padding: 0.375rem 1.25rem;
-webkit-transition: border-color 0.2s;
-moz-transition: border-color 0.2s;
transition: border-color 0.2s;
color: white;
}
input[type="search"]:focus {
transition: all 0.5s;
box-shadow: 0 0 20px #00a2ff;
/* border-color: #f9d342; */
outline: none;
}
Related
I've got a search box which transitions and gets bigger when clicked on, and there is a button beside it. My problem is that the input box moves softly but the button stays in place and then teleports to its position once the transition is over. How can I trigger a transition on the button once the input box is clicked?
.searchbox {
width: 150px;
height: 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 14px;
background-color: white;
background-position: 2px 2px;
background-repeat: no-repeat;
padding: 12px 20px 12px 45px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
margin-top:10px;
}
.searchbox:focus {
width: 100%;
}
.searchbt {
float: left;
width: 15px;
height: 4px;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
cursor: pointer;
border:none;
margin-top:10px;
border-radius: 4px;
position:absolute;
z-index:1;
border: 2px solid #ccc;
border-right:none;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
.searchbt:focus {
width=100%;
}
Thanks for your help in advance.
Edit: I temporarily fixed it by moving the button to the other side (The one which doesn't move)
I have a very small container which has a custom dropdown element inside of it.
#main {
height: 90px;
width: 400px;
overflow-y: auto;
}
.wrapper-dropdown {
text-transform: uppercase;
letter-spacing: .08em;
font-size: 12px;
position: relative;
width: 200px;
padding: 12px 15px;
background: #fff;
border-radius: 6px;
border: 1px solid #d9e2f6;
cursor: pointer;
outline: none;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.wrapper-dropdown .dropdown {
position: absolute;
top: 100%;
left: -1px;
right: -1px;
background: #fff;
border-radius: 0 0 5px 5px;
border: 1px solid #d9e2f6;
border-top: none;
border-bottom: none;
list-style: none;
padding: 0 5px;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
max-height: 0;
overflow: hidden;
margin: 0;
z-index: 5;
}
.wrapper-dropdown .dropdown li {
padding: 0 10px;
width: 100%;
}
.wrapper-dropdown .dropdown li a {
display: block;
text-decoration: none;
color: #6a759e;
padding: 15px 0;
transition: all .3s ease-out;
border-bottom: 1px solid #d9e2f6;
margin-right: 20px;
}
.wrapper-dropdown.active .dropdown {
-webkit-box-shadow: 0 10px 20px 0 rgba(217, 226, 246, .8);
-moz-box-shadow: 0 10px 20px 0 rgba(217, 226, 246, .8);
box-shadow: 0 10px 20px 0 rgba(217, 226, 246, .8);
max-height: 400px;
}
<div id="main">
CLICK OPTION 1 TO SHOW LIST
<div class="wrapper-dropdown">
<span class="selectedtext">Option1</span>
<ul class="dropdown">
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
</ul>
</div>
</div>
I'm trying to get the absolute positioned element (which is the list of options) to appear outside of the bounds of the main container which has overflow-y set.
I understand why this happening this due to this answer.
But am simply asking if anyone has any insights/tips/suggestions on a way to get around this or if it's generally not possible without moving the dropdown items outside of the container with the overflow set.
My example is here
When I hover over the corner of the element I am getting a weird constant hover and hover out effect, how can I fix this?
HTML
<h2>
HELLO
</h2>
CSS
h2 {
position: absolute;
background: rgba(2,35,64,0.58);
width: calc(100% - 97px);
height: calc(100% - 88px);
line-height: calc(100% + 70px);
top: 0;
left: 0;
display: block;
font-size: 18px;
text-transform: uppercase;
text-align: center;
color: #FFF;
border: solid 20px rgba(2,35,64,0);
padding: 20px;
margin: 0px;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
cursor: pointer;
}
h2:hover {
border: solid 5px #FFF;
padding: 10px;
margin: 25px;
background: transparent;
}
h2.woocommerce-loop-category__title:hover {
border: solid 5px #FFF;
padding: 10px;
margin: 25px;
background: transparent;
}
http://jsfiddle.net/xc7vjstn/1/
change the background from transparent to what ever color you want and you will see the content plus if you want to keep it online like small box then margin and padding is what you need to play with.
h2:hover {
border: solid 5px #FFF;
padding: 10px;
margin: 25px;
background: blue;
}
The margin in h2:hover is causing the behavior removing the margin fixed the problem
h2:hover {
border: solid 5px #FFF;
padding: 10px;
/*margin: 25px; */
background: transparent;
}
Here is my solution, please check the live example below:
h2 {
position: absolute;
background: rgba(2, 35, 64, 0.58);
width: calc(100% - 97px);
height: calc(100% - 88px);
line-height: calc(100% + 70px);
top: 0;
left: 0;
font-size: 18px;
text-transform: uppercase;
text-align: center;
color: #FFF;
border: solid 20px rgba(2, 35, 64, 0);
padding: 20px;
margin: 0 auto;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
cursor: pointer;
}
h2:hover {
background: transparent;
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
<h2>
HELLO
</h2>
http://codepen.io/leongaban/pen/NqzxPR?editors=110
I have a form which 2 inputs, once the user highlights (:focus) an input and starts typing, the text turns white.
body {
font-family: Arial, sans-serif;
background: #3D3D3D;
}
.login-form {
margin-top: 20px;
}
.login-form input {
margin-bottom: 20px;
width: 416px;
height: 40px;
font-size: em(20);
text-indent: 15px;
color: #656565;
background: #3D3D3D;
border: 1px solid #656565;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.login-form input[value], .login-form input:focus, .login-form input:active {
color: #fff;
border: 1px solid #fff;
}
input .login-form[value] {
color: #fff;
border: 1px solid #fff;
}
.login-btn {
padding: 12px 0;
width: 420px;
color: #00D88C;
background: #3D3D3D;
border: 2px solid #00D88C;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.login-btn:hover {
color: #fff;
background: #00D88C;
}
However after finishing typing and then tabbing to the next input, the first input loses it's style. What is the pseudo selector I need to insure that the first input keeps it's :focus style?
Is there a way to style the "unfocused but filled out state" of an input?
You are doing this the wrong way.
You want the placeholders to be gray and text to be white.
So, style your placeholder with gray and let white be the main one. Like this:
input {
color: white;
}
input[type=text]:-moz-placeholder {
color: gray;
}
input[type=text]::-moz-placeholder {
color: gray;
}
input[type=text]:-ms-input-placeholder {
color: gray;
}
input[type=text]::-webkit-input-placeholder {
color: gray;
}
I can't seem to get my button to change colour with CSS3 transitions. I've been successful using the roundabout same code on and tags, but no such luck with the button.
Here's the code:
.button {
position:absolute;
width: 135px;
height: 46px;
background-color: #ef6529;
text-decoration: none;
border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid #c33b00;
box-shadow: 0px 4px 0px #af5a5a;
-moz-box-shadow: 0px 4px 0px #af5a5a;
-webkit-box-shadow: 0px 4px 0px #af5a5a;
-webkit-transition:color 1s ease-in;
-moz-transition:color 1s ease-in;
-o-transition:color 1s ease-in;
transition:color 1s ease-in;
}
.button:hover {
width: 135px;
height: 46px;
background-color: #ff6726;
border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid #c33b00;
text-decoration: none;
}
and the HTML:
<a href="#" class="button">
<!--<h2>PUSH ME!</h2>-->
</a>
Cheers!
You haven't specified colors for the button. I presume you want to transition the background color insted. Just change transition:color 1s ease-in; to transition: background-color 1s ease-in;.