I'm trying to create a search bar in vue. Right now the search bar opens from the left side, but I want it to open from the right side. Instead of background image, I want to use a font awesome icon as well. How do I achieve these two?
<template>
<span id="demo-2">
<input type="search" placeholder="Search">
</span>
</template>
<style scoped>
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
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;
}
#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;
}
</style>
I don't know the answer for the animation but if you want to add font awesome icon you can add its link to the main template file for the vuejs . just copy paste you link to the head section in there and use the <i>search icon</i> in the vue code.
Replacing background by a font-awesome icon
You could use :after or :before property in CSS :
https://developer.mozilla.org/en/docs/Web/CSS/::before
It will allow you to display content, linked to your input (like a font-awesome glyphicon for example) :
input {
position: relative;
}
input:after {
content: '\f002';
position: absolute;
right: 10px;
top: 5px;
}
In this case, the font-awesome icon is : \f002 :
https://fontawesome.com/icons/search?style=solid
Animate from the right
If you use :after property and the position is absolute to your input (with a right CSS property), it should open from the right.
Related
I was messing around in HTML when I saw this small bug
I made this button using SCSS and gave it a border radius of 5px. If you're able to notice, there's a small curve where the border raidus is supposed to be.
Close up:
Why is this happening?
Code
/* Button.scss file */
#import "../../util/variables";
button {
background-color: white;
color: black;
outline: none;
border: 1px currentColor solid;
padding: 0.3rem 0.85rem;
border-radius: $border-radius;
&:hover {
cursor: pointer;
}
&.primary {
background-color: $primary;
color: $primary-text;
}
&.secondary {
background-color: $secondary;
color: $secondary-text;
}
&.block {
display: block;
width: 100%;
margin-bottom: 0.5rem;
}
}
<!-- HTML -->
<button
class="button"
>
Login
</button>
EDIT:
$primary is #283593
I use firefox
button {
background-color: white;
color: black;
outline: none;
border: 1px currentColor solid;
padding: 0.3rem 0.85rem;
border-radius: 5px;
}
button:hover {
cursor: pointer;
}
button.primary {
background-color: #283593;
color: white;
}
button.block {
display: block;
width: 100%;
margin-bottom: 0.5rem;
}
<button class="button primary">Login</button>
This is an artifact caused by the imprecision of fractional numbers used in the rendering. You can expect it to vary depending on browser, and perhaps even GPU and rendering mode.
See also: Is floating point math broken?
I have a search bar that has a transition animation applied to it.
Initially the bar looks like this:
On hover, it transitions to look like this:
The issue starts here. When I hover away from the text/bar, the bar transitions back to the initial bar. When hovered back, any text written is still there. I want it to be such that the transition is disabled when the bar is active. (So that, the user still sees the text despite hovering away from the bar.)
Below is the CSS for the search bar:
/* search */
.search-box {
background: #2f3640;
height: 20px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: #5b9cdd;
color: #2f3640;
}
.search-btn {
float: right;
width: 30px;
height: 30px;
transform: translateY(-5px);
border-radius: 60%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 0.2s;
color: #5b9cdd;
cursor: pointer;
}
.search-btn>i {
font-size: 20px;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.5s;
line-height: 20px;
width: 0px;
font-weight: normal;
}
<!-- search section of the header -->
<div class="search-box">
<input type="text" name="" class="search-txt" placeholder="What are you searching for?" />
<a class="search-btn"><i class="fa fa-search"></i></a>
</div>
There is no need to add javascript. You can add the following css and it should do the job:
input:not(:placeholder-shown) {
width: 240px;
}
I'm trying to change the text of the button when you hover on it, I found a solution but for some reason it won't work.
What I want to happen is when I hover on it it will turn to green and change the text to Completed!.
Currently the button changes color when I hover on it but the text wont change.
Here's my css:
.button {
border: 0px solid #004B84;
background: red;
padding: 3px 21px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
color: #ffffff;
font-size: 12px;
font-family: Questrial;
text-decoration: none;
vertical-align: middle;
letter-spacing: 2px;
}
.button:hover {
border: 0px solid #1292e1;
background: green;
color: white !important;
content: "Completed!" !important;
}
.button:active {
background: #1292e1;
color: white;
text-decoration: none !important;
}
<button class="button" type="submit" name="completed" value="">New Request</button>
And here's the html for the button:
<button class="button" type="submit" name="completed" value="">New Request</button>
You could do this using a psuedo element.
.button {
width: 150px; /* set a width so it doesnt change upon hover */
border: 0px solid #004B84;
background: red;
padding: 3px 21px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
color: #ffffff;
font-size: 12px;
font-family: Questrial;
text-decoration: none;
vertical-align: middle;
letter-spacing: 2px;
}
.button:hover span {
display:none
}
.button:hover:before {
content:"Completed!";
}
.button:hover {
background-color: green;
}
<button class="button">
<span>New request</span>
</button>
CSS (without HTML):
You don't need to touch your HTML (manually adding <span> tags, manually
removing HTML element content, etc) for this.
Just set the button's text content font-size to 0px then add your own text and font-size to the button using :hover, ::after and ::after:hover.
Check and run the following Code Snippet for a practical example of using just CSS to edit your button's content:
.button {font-size: 0px;min-width: 100px;min-height: 22px;}
.button::after {font-size: 14px;}
.button::after {
content: "New Request";
}
.button:hover::after {
content: "Completed!";
}
.button:hover {
background-color: green;
border: 0px solid #1292e1;
color: white !important;
}
<button class="button" type="submit" name="completed" value="">New Request</button>
JavaScript:
Just use the textContent() property to change your text on hover (mouseover) to Completed and back to New Request when hovered out (mouseout).
Check and run the following Code Snippet for a practical example of the JavaScript approach above:
var btn = document.querySelector(".button");
btn.addEventListener("mouseover", function() {
this.textContent = "Completed!";
})
btn.addEventListener("mouseout", function() {
this.textContent = "New Request";
})
.button {
min-width: 100px;
min-height: 22px;
}
.button:hover {
background-color: green;
border: 0px solid #1292e1;
color: white !important;
}
<button class="button" type="submit" name="completed" value="">New Request</button>
#K. Rogers Try Code Hope This Will Work For You!
/* .button */
.button {
display: inline-block;
position: relative;
border: 0px solid #004B84;
background: red;
padding: 8px 25px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
color: #ffffff;
font-size: 12px;
font-family: Questrial;
text-decoration: none;
vertical-align: middle;
letter-spacing: 2px;
overflow: hidden;
}
.button:hover { background: green; }
.button span {
transition: 0.6s;
transition-delay: 0.2s;
}
.button:before,
.button:after {
content: '';
position: absolute;
top: 0.67em;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
transition: .4s,opacity .6s;
}
/* :before */
.button:before {
content: attr(data-hover);
transform: translate(-150%,0);
}
/* :after */
.button:after {
content: attr(data-active);
transform: translate(150%,0);
}
/* Span on :hover and :active */
.button:hover span,
.button:active span {
opacity: 0;
transform: scale(0.3);
}
/* :before pseudo-element on :hover
and :after pseudo-element on :active */
.button:hover:before,
.button:active:after {
opacity: 1;
transform: translate(0,0);
transition-delay: .4s;
}
.button:active:before {
transform: translate(-150%,0);
transition-delay: 0s;
}
<button class="button" type="button" data-hover="COMPLETED" data-active="I'M ACTIVE"><span>New Request </span></button>
Here is one more solution wit no change button html-code. Just using css style of pseudo-element ::after
To prevent a change of button width on hover you need to define width property.
.button {
border: 0px solid #004B84;
min-width: 150px;
background: red;
padding: 5px 21px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
color: #ffffff;
font-size: 12px;
font-family: Questrial;
text-decoration: none;
vertical-align: middle;
letter-spacing: 2px;
}
.button:hover {
background: green;
}
.button::after {
content: "New request!";
}
.button:hover::after {
content: "Completed!";
}
.button:active {
background: #1292e1;
}
.button:active::after {
background: #1292e1;
}
<button class="button" type="submit" name="completed" value=""></button>
See:
https://www.w3schools.com/cssref/pr_gen_content.asp
The content property is used with the ::before and ::after
pseudo-elements, to insert generated content.
You will need Javascript or more.
e.g.
<button class="button" type="submit" name="completed" value="" onmouseover="document.getElementsByName('completed')[0].innerHTML ='Completed!';" onmouseleave="document.getElementsByName('completed')[0].innerHTML ='New Request';">New Request</button>
If you want to change the value of an element on a page, then you need to do it per code - try to do it with JavaScript
Edit:
Seems like there is a way:
How can I replace text with CSS?
Im trying to add a linear effect on my input button. When the user hovers on the button, I want the bottom border line to start from center, and then go to right and left at the same time. So the line spreads out from center to the corners when the user hovers over it.
I managed to add a hover line, but it does not work as I want. I have looked around and I can only find questions regarding headings or tabs, not buttons.
#btn {
margin: 10px;
padding: 20px;
width: 470px;
height: 50px;
border: 2px solid #f7f7f7;
text-align: center;
text-transform: uppercase;
position: relative;
}
#btn:hover {
cursor: pointer;
border-bottom: 2px solid red;
transition: 0.3s;
}
<input id="btn" type="submit" name="" value="Click">
You cannot use pseudo-element since it's an input tag so you can try this solution with linear-gradient as background:
#btn {
margin: 10px;
padding: 20px;
width: 470px;
height: 50px;
border: 2px solid #f7f7f7;
text-align: center;
text-transform: uppercase;
cursor: pointer;
background:
linear-gradient(red, red) bottom / 0% 2px no-repeat
#ccc;
transition: 1s;
}
#btn:hover {
background-size: 100% 2px;
}
<input id="btn" type="submit" name="" value="Click">
I created a button:
http://jsfiddle.net/fy2zG/#&togetherjs=xaJ1VA8PBN
My css so far is:
.button {
padding: 5px 20px;
background: orange;
position: relative;
float:left;
text-align: center;
border-radius: 10px;
text-decoration: none;
color: white;
}
My goal is to have (only) the right side of the button turning to an arrow peak on hover. The result should be something similar like this:
When hovering out, the button shall transit to its original shape.
Is this something that can be achieved with CSS or is jQuery needed?
Working example
jsfiddle
EDIT, now with transition
jsfiddle
EDIT, now with transition on mouseout
jsfiddle
HTML
login
CSS
.button {
padding: 5px 20px;
background: orange;
position: relative;
float:left;
text-align: center;
border-radius: 10px;
text-decoration: none;
color: white;
position:relative;
}
.button:after {
content: " ";
border: solid transparent;
border-width: 0;
border-left-color: orange;
position: absolute;
-webkit-transition: all 1s ease;
left: 100%;
top: 50%;
}
.button:hover:after {
content: " ";
display:block;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-left-color: orange;
border-width: 25px;
margin-top: -25px;
margin-left: -10px;
}
Can't make that with css or jQuery (unless i don't know some plugin).
Basically you must have two images. One for normal button, one for arrow shaped button. And onNover just change background image using background transition. But i think it will look ugly.