This question already has answers here:
CSS/HTML: Create a glowing border around an Input Field
(11 answers)
Closed 3 years ago.
I want to recreate this 'on-focus-blue-glow' effect on the input tag like this:
Here is my effort :
input:focus{
outline-color : lightskyblue;
outline-width : 5px;
border : 1px solid blue;
}
input{
padding : 0;
line-height : 35px;
border-radius : 5px;
border : 1px solid black;
width : 500px;
}
<input type="text" />
But the outline is very small and unnoticeable. And the outline doesn't have round corners, either.
So how can I recreate the effect?
Hello here I developed an example, I hope it serves you.
*, ::after, ::before {
box-sizing: border-box;
}
input {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
input {
overflow: visible;
}
.input-focus {
display: block;
width: 100%;
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
#media (prefers-reduced-motion: reduce) {
.input-focus {
transition: none;
}
}
.input-focus::-ms-expand {
background-color: transparent;
border: 0;
}
.input-focus:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #495057;
}
.input-focus:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}
.input-focus::-webkit-input-placeholder {
color: #6c757d;
opacity: 1;
}
.input-focus::-moz-placeholder {
color: #6c757d;
opacity: 1;
}
.input-focus:-ms-input-placeholder {
color: #6c757d;
opacity: 1;
}
.input-focus::-ms-input-placeholder {
color: #6c757d;
opacity: 1;
}
.input-focus::placeholder {
color: #6c757d;
opacity: 1;
}
.input-focus:disabled {
background-color: #e9ecef;
opacity: 1;
}
#media print {
*, ::after, ::before {
text-shadow: none !important;
box-shadow: none !important;
}
}
<input type="text" class="input-focus" aria-describedby="emailHelp">
You can try using a box shadow in CSS and RGBA for a slightly transparent effect on your border's glow. That should give you the desired soft glow effect because of the blur and tiny bit of transparency in it, for example:
input:focus {
outline-color: lightskyblue;
outline-width: 1em;
border: .25em solid blue;
box-shadow: 0em 0em .75em rgba(0,0,255,0.95);
}
input {
padding: 0;
line-height: 35px;
border-radius: 5px;
border: 1px solid black;
width: 500px;
}
<input type="text" />
With box shadow you can have setting for: v-offset h-offset blur. The third setting is what give you the fuzzy or blurred look around the border/outline. For more detailed info check out the MDN about it.
.input{
padding : 0;
line-height : 35px;
border-radius : 5px;
border : 1px solid black;
width : 500px;
}
input:focus{
outline: none !important;
border:1px solid red;
box-shadow: 0 0 10px #719ECE;
}
<input class="input" />
Related
I'm just too dumb to get the same effect of the white button on the dark one. Could you explain to me the thought process to get the effect on any background color?
Ideally I would like to get a ripple effect of whiteish or greyish color that works on every background.
Credits to the original one https://codepen.io/finnhvman/pen/jLXKJw
/* Button style */
.btn-light {
border: none;
border-radius: 2px;
padding: 12px 18px;
font-size: 16px;
text-transform: uppercase;
cursor: pointer;
color: black;
background-color: white;
box-shadow: 0 0 4px #999;
outline: none;
}
.btn-dark{
border: none;
border-radius: 2px;
padding: 12px 18px;
font-size: 16px;
text-transform: uppercase;
cursor: pointer;
color: white;
background-color: black;
box-shadow: 0 0 4px #999;
outline: none;
}
/* Ripple effect */
.ripple {
background-position: center;
transition: background 0.8s;
}
.ripple-light:hover {
background: transparent radial-gradient(circle, transparent 1%, white 1%) center/15000%;
}
.ripple-light:active {
background-color: grey;
background-size: 100%;
transition: background 0s;
}
.ripple-dark:hover {
background: transparent radial-gradient(circle, transparent 1%, dark 1%) center/15000%;
}
.ripple-dark:active {
background-color: grey;
background-size: 100%;
transition: background 0s;
}
<button class="btn-light ripple ripple-light">Button</button>
<button class="btn-dark ripple ripple-dark">Button</button>
Use CSS variable to define the colors:
/* Button style */
.btn {
border: none;
border-radius: 2px;
padding: 12px 18px;
font-size: 16px;
text-transform: uppercase;
cursor: pointer;
color: black;
background-color: var(--c);
box-shadow: 0 0 4px #999;
outline: none;
}
.light {
--c: #fff;
color:#000;
}
.dark {
--c: #000;
color:#fff;
}
/* Ripple effect */
.ripple {
background-position: center;
transition: background 0.8s;
}
.ripple:hover {
background: var(--c) radial-gradient(circle, #0000 1%, var(--c) 1%) center/15000% ;
}
.ripple:active {
background-color: grey;
background-size: 100%;
transition: background 0s;
}
<button class="btn light ripple">Button</button>
<button class="btn dark ripple">Button</button>
I created a flask application using a template that I found online. I am not well-versed with html or css. After calling the application, I realized that the background of the web page has a red-to-blue gradient that I would like to change to a regular dark blue color. Could you please let me know where in my code I can do this. The code is pasted below. Thanks in advance.
I tried changing background-image to none and background to #e6e6e6 (which represents the blue that I want) in multiple places, but it still did not work
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #00008B; }
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; }
.btn-block { width: 100%; display:block; }
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
html { width: 100%; height:100%; overflow:scroll; }
body {
width: 100%;
height:100%;
font-family: 'Open Sans', sans-serif;
background-image: none;
background-color: #e6e6e6;
color: #fff;
font-size: 18px;
text-align:center;
letter-spacing:1.2px;
}
.login {
position: absolute;
top: 40%;
left: 50%;
margin: -150px 0 0 -150px;
width:400px;
height:450px;
}
.login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
input {
width: 100%;
margin-bottom: 15px;
background-image:none;
background: #e6e6e6;
border: none;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
border-radius: 4px;
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
}
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }
You can try adding !important to override the background from the template. it would look something like this
background-image:none !important;
background-color: #e6e6e6 !important;
I'm trying to move boxes up when simply doing a mouseover. I can mouseover on each box, but can't get it to move up.
Here's my code:
body {
text-align: center;
}
.row {
padding: 50px 0;
}
.post-item {
outline: 1px solid red;
padding: 50px 20px;
border: 5px solid transparent;
}
.post-item:hover {
outline: 0px solid transparent;
padding: 50px 20px;
border: 5px solid red;
}
Here's my LIVE DEMO
Your given examples did it by two CSS properties:
.post-item:hover {
outline: 0px solid transparent;
padding: 50px 20px;
border: 5px solid red;
transform: translate3d(0,-3px,0); /* This line defining how many pixel should move */
transition: all .15s cubic-bezier(.33,.66,.66,1); /* This line defining transition time such as here: .15s */
}
You should use transform like the following:
body {
text-align: center;
}
.row {
padding: 50px 0;
}
.post-item {
outline: 1px solid red;
padding: 50px 20px;
border: 5px solid transparent;
transition: all 200ms ease;
}
.post-item:hover {
outline: 0px solid transparent;
padding: 50px 20px;
border: 5px solid red;
transform: translateY(-3px);
}
You can add the following code when you hover the element to move up.
.post-item:hover{transform:translateY(-3%);}
I found some examples of expanding a textarea vertically using bootstrap.
I would like to horizontally expand a text input from this [..] to this [........] on click event with an animation.
Is there something in bootstrap that would simplify this or do I have to roll my own?
I ended up using pure css from codepen by someone named Prinzadi
body {
background: #fff;
color: #666;
font: 90%/180% Arial, Helvetica, sans-serif;
width: 800px;
max-width: 96%;
margin: 0 auto;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}
h1 {
font: 1.7em;
line-height: 110%;
color: #000;
}
p {
margin: 0 0 20px;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
-moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
box-shadow: 0 0 5px rgba(109, 207, 246, .5);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
/* Demo 2 */
#demo-2 input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-2 input[type=search]:hover {
background-color: #fff;
}
#demo-2 input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-2 input:-moz-placeholder {
color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
color: transparent;
}
<h1>Expandable Search Form</h1>
<p>Pen by Prinzadi</p>
<h3>Demo 1</h3>
<form>
<input type="search" placeholder="Search">
</form>
<h3>Demo 2</h3>
<form id="demo-2">
<input type="search" placeholder="Search">
</form>
i want to make a range slider with some design in it. I have no idea how to stylize the input. http://prntscr.com/ebyoev like this one
The thing i want to do is, i dont know how to implement the circles on the start and end of the range slider and how to stylize the current circle range
https://jsfiddle.net/agghvm9t/ this is the fiddle
This is how far i have come
<div class="range-slider">
<input class="range-slider__range" type="range" value="100" min="0" max="500">
</div>
This is my css
*, *:before, *:after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
padding: 60px 20px;
}
#media (min-width: 600px) {
body {
padding: 60px;
}
}
.range-slider {
margin: 60px 0 0 0%;
}
.range-slider {
width: 100%;
}
.range-slider__range {
-webkit-appearance: none;
width: calc(100% - (73px));
height: 10px;
border-radius: 5px;
background: #d7dcdf;
outline: none;
padding: 0;
margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider__range::-moz-range-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-moz-range-thumb {
background: #1abc9c;
}
.range-slider__value {
display: inline-block;
position: relative;
width: 60px;
color: #fff;
line-height: 20px;
text-align: center;
border-radius: 3px;
background: #2c3e50;
padding: 5px 10px;
margin-left: 8px;
}
.range-slider__value:after {
position: absolute;
top: 8px;
left: -7px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #2c3e50;
border-bottom: 7px solid transparent;
content: '';
}
::-moz-range-track {
background: #d7dcdf;
border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0;
}
THis is my jquery
var rangeSlider = function(){
var slider = $('.range-slider'),
range = $('.range-slider__range'),
value = $('.range-slider__value');
slider.each(function(){
value.each(function(){
var value = $(this).prev().attr('value');
$(this).html(value);
});
range.on('input', function(){
$(this).next(value).html(this.value);
});
});
};
rangeSlider();
I'd approach this with using pseudo elements. You can have one :before and one :after pseudo element and since you only need two - one at the beginning and one at the end, it might just work:
.range-slider {
position:relative;
}
.range-slider:before {
content: "";
position: absolute;
left: 0;
background-image: url("circle-image");
width: 25px;
height: 25px;
}
.range-slider:after {
content: "";
position: absolute;
right: 0;
background-image: url("circle-image");
width: 25px;
height: 25px;
}
To style the sliding circle, you can try something like this:
.range-slider__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 36px;
height: 36px;
border-radius: 50%;
background: orange;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
border: 1px solid orange;
box-shadow: inset 0 0 0 6px #fff;
}