I have input and on focus I show omg before placeholder and text, but now displays from top to down and I need from left to right and best used transforms, and it would be from left to right just as it is now text. Can someone help me?
Thank you.
input[type="text"] {
width: 100%;
height: 25px;
padding: 1rem;
font-size: 14px;
border: 1px solid #e6e6e6;
outline: none;
transition: all .2s linear;
}
input[type="text"]:focus {
background: url("https://svgshare.com/i/97k.svg") no-repeat;
background-size: 27px 27px;
background-position: 5px center;
background-color: white;
padding-left: 35px;
border-color: #cccccc;
color: black;
transform-origin: 50% 50%;
}
<input type="text" placeholder="Text">
Here you go:
input[type="text"] {
width: 100%;
height: 25px;
padding: 1rem;
font-size: 14px;
border: 1px solid #e6e6e6;
outline: none;
transition: all .2s linear;
background: url("https://svgshare.com/i/97k.svg") no-repeat;
background-size: 27px 27px;
background-position: -35px center;
}
input[type="text"]:focus {
background-position: 10px center;
background-color: white;
padding-left: 45px;
border-color: #cccccc;
color: black;
transform-origin: 50% 50%;
}
<input type="text" placeholder="Text">
Related
I am currently working on adding shadows to my custom icon and input. The current view is:
and the wanting output that I am looking for is:
I have been trying to add box-shadow, transparent background color, drop-shadow and this is the closest that I have achieved.
To mention, the arrow is an image:
body {
background-image: url('../images/bg2.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 250px;
padding: 5px 15px 30px 15px;
width: 500px;
}
.text-center {
text-align: center;
}
*:focus {
outline: none;
}
.form-control {
align-items: center;
display: flex;
justify-content: center;
}
label {
display: block;
}
.help-text {
color: #FFFF;
font-size: 9px;
color: #999;
margin-right: 8px;
}
select,
input {
background: #582e79;
border-radius: 8px;
border: 1px #582e79;
color: #999;
filter: drop-shadow(1px 1px 1px #3c1f52);
margin-left: 25px;
margin-top: 135px;
padding: 5px 10px;
text-align: center;
width: 150px;
}
.mt10 {
margin-top: 20px;
}
.submit {
background-color: transparent;
background-image: url("../images/arrow.png");
background-position: center center;
background-repeat: no-repeat;
border: none;
height: 23px;
margin-left: 15px;
margin-top: 135px;
outline: none;
padding-bottom: 30px;
transition: 0.3s;
width: 23px;
}
<div class="text-center">
<div class="form-control mt10">
<input type="text" id="discord-id-input" name="discord-id-input" placeholder="Discord ID">
<button id="discord-id-button" type="submit" class="submit"></button>
</div>
<a class="help-text">ENTER DISCORD USER ID AND SUBMIT</a>
</div>
I wonder how can I add the shadow both to input and icon to be shadow like the wanting picture?
Simply use the box-shadow-property liek this:
box-shadow: 0 2px 0 Black;
which has following syntax
[horizontal offset] [vertical-offset] [blur] [color]
#discord-id-button,
#discord-id-input {
box-shadow: 0 2px 0 black;
}
/* original CSS */
body {
background-image: url('../images/bg2.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 250px;
padding: 5px 15px 30px 15px;
width: 500px;
}
.text-center {
text-align: center;
}
*:focus {
outline: none;
}
.form-control {
align-items: center;
display: flex;
justify-content: center;
}
label {
display: block;
}
.help-text {
color: #FFFF;
font-size: 9px;
color: #999;
margin-right: 8px;
}
select,
input {
background: #582e79;
border-radius: 8px;
border: 1px #582e79;
color: #999;
filter: drop-shadow(1px 1px 1px #3c1f52);
margin-left: 25px;
margin-top: 135px;
padding: 5px 10px;
text-align: center;
width: 150px;
}
.mt10 {
margin-top: 20px;
}
.submit {
background-color: transparent;
background-image: url("../images/arrow.png");
background-position: center center;
background-repeat: no-repeat;
border: none;
height: 23px;
margin-left: 15px;
margin-top: 135px;
outline: none;
padding-bottom: 30px;
transition: 0.3s;
width: 23px;
}
.submit:hover {
background-image: url("../images/arrow-hover.png");
}
<div class="text-center">
<div class="form-control mt10">
<input type="text" id="discord-id-input" name="discord-id-input" placeholder="Discord ID">
<button id="discord-id-button" type="submit" class="submit"></button>
</div>
<a class="help-text">ENTER DISCORD USER ID AND SUBMIT</a>
</div>
I'm trying to align text and images in a table for my navbar. There are two columns.
The problem is that the text and the image on the left column (class "NavAccueil") are aligned on the left (at least it looks like it) but the texts on the right column ("NavWarp") are not aligned on the right of my table. I don't know why. Here's the code (It might be very bad, I'm new at this)
#BarreNavigation {
position: sticky;
top: 0;
background-image: url("../Assets/Images/CounterStrike3.png");
background-size: cover;
background-position: top;
width: 100%;
max-height: fit-content;
z-index: 1;
margin: 0 auto;
border-style: solid;
border-color: #a58e188e;
border-width: 0.5vh;
border-radius: 1vh;
text-align: center;
font-size: 3.5vh;
font-family: "Mono";
}
#BarreNavigation a {
color: #ffffff;
transition: text-shadow 250ms ease;
text-shadow: 2px 2px 3px #000000;
text-decoration: none;
padding-left: 2vh;
padding-right: 2vh;
}
#BarreNavigation a:hover {
text-shadow: 2px 2px 3px #ff7300;
}
.NavAccueil {
width: 40%;
text-align: left;
text-shadow: none;
filter: drop-shadow(2px 2px 3px black);
transition: filter 250ms ease;
}
.NavAccueil :hover {
filter: drop-shadow(2px 2px 3px #ff7300)
}
.NavAccueilIcon {
width: 4vh;
vertical-align: -10%;
padding-right: 1vh;
}
.NavWarp {
width: 60%;
}
.NavWarpText {
background-color: rgba(49, 39, 10, 0.411);
border-radius: 0.5vh;
}
<div id="BarreNavigation">
<table>
<tr>
<td class="NavAccueil">
<img src="Assets/Images/IconSite/Accueil.png" class="NavAccueilIcon">Accueil
</td>
<td class="NavWarp">
Presentation
Modes De Jeu
Les Cartes
</td>
</tr>
</table>
</div>
Also, I've a problem where the text in the "boxes" on the right are like cut when the width they have is not enough so they get cut and one part of the text in the box stays on the top and the other one goes on the bottom of the navbar so the boxes are like cut.
Anyways, that's another problem.
So if anybody knows how to align that text on right, I would be happy to learn from you.
table by default is only as wide as its content.
Add
table { table-layout: fixed; min-width: 100%; }
table { table-layout: fixed; min-width: 100%; }
#BarreNavigation {
position: sticky;
top: 0;
background-image: url("../Assets/Images/CounterStrike3.png");
background-size: cover;
background-position: top;
width: 100%;
max-height: fit-content;
z-index: 1;
margin: 0 auto;
border-style: solid;
border-color: #a58e188e;
border-width: 0.5vh;
border-radius: 1vh;
text-align: center;
font-size: 3.5vh;
font-family: "Mono";
}
#BarreNavigation a {
color: #ffffff;
transition: text-shadow 250ms ease;
text-shadow: 2px 2px 3px #000000;
text-decoration: none;
padding-left: 2vh;
padding-right: 2vh;
}
#BarreNavigation a:hover {
text-shadow: 2px 2px 3px #ff7300;
}
.NavAccueil {
width: 40%;
text-align: left;
text-shadow: none;
filter: drop-shadow(2px 2px 3px black);
transition: filter 250ms ease;
}
.NavAccueil :hover {
filter: drop-shadow(2px 2px 3px #ff7300)
}
.NavAccueilIcon {
width: 4vh;
vertical-align: -10%;
padding-right: 1vh;
}
.NavWarp {
width: 60%;
}
.NavWarpText {
background-color: rgba(49, 39, 10, 0.411);
border-radius: 0.5vh;
}
<div id="BarreNavigation">
<table>
<tr>
<td class="NavAccueil">
<img src="Assets/Images/IconSite/Accueil.png" class="NavAccueilIcon">Accueil
</td>
<td class="NavWarp">
Presentation
Modes De Jeu
Les Cartes
</td>
</tr>
</table>
</div>
This question already has answers here:
How can I center an absolutely positioned element in a div?
(37 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
Below, the left: 50% in the css does not move the input element in any way. Anyone know why? Is this just not possible? Do I have anything blocking it? I don't want to use margins because it will look different on different computers. If left: is not possible, how can this be centered either way?
(I put the left: 50% at the bottom of css for the searchbar)
#searchbar{
border-radius: 4px;
background-color: transparent;
cursor: pointer;
color: transparent;
background: #FFF;
padding: 1px 1px 1px 5px;
width: 30px;
height: 30px;
outline: none;
border: 1px solid #CCCCCC;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
text-align: center;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Simpleicons_Interface_magnifier-1.svg/768px-Simpleicons_Interface_magnifier-1.svg.png) no-repeat scroll 0 0;
background-size: contain;
border:none;
right: 50%
}
<input id = "searchbar" name = "search" size = "1" autocomplete="off" maxlength="27">
Try,
<input id = "searchbar" name = "search" size = "1" autocomplete="off" maxlength="27">
CSS
#searchbar{
position:absolute;
left:50%;
border-radius: 4px;
background-color: transparent;
cursor: pointer;
color: transparent;
background: #FFF;
padding: 1px 1px 1px 5px;
width: 30px;
height: 30px;
outline: none;
border: 1px solid #CCCCCC;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
text-align: center;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Simpleicons_Interface_magnifier-1.svg/768px-Simpleicons_Interface_magnifier-1.svg.png) no-repeat scroll 0 0;
background-size: contain;
border:none;
}
OR
<div id="searchbardiv">
<input id = "searchbar" name = "search" size = "1" autocomplete="off" maxlength="27">
</div>
CSS
#searchbardiv{
width:100%;
display:flex;
position relative
}
#searchbar{
position:absolute;
left:50%;
border-radius: 4px;
background-color: transparent;
cursor: pointer;
color: transparent;
background: #FFF;
padding: 1px 1px 1px 5px;
width: 30px;
height: 30px;
outline: none;
border: 1px solid #CCCCCC;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
text-align: center;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Simpleicons_Interface_magnifier-1.svg/768px-Simpleicons_Interface_magnifier-1.svg.png) no-repeat scroll 0 0;
background-size: contain;
border:none;
}
You can use a flex box to center content.
.flex {
display: flex;
flex-direction: row;
justify-content: center;
}
#searchbar {
border-radius: 4px;
background-color: transparent;
cursor: pointer;
color: transparent;
background: #FFF;
padding: 1px 1px 1px 5px;
width: 30px;
height: 30px;
outline: none;
border: 1px solid #CCCCCC;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
text-align: center;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Simpleicons_Interface_magnifier-1.svg/768px-Simpleicons_Interface_magnifier-1.svg.png) no-repeat scroll 0 0;
background-size: contain;
border: none;
}
<div class="flex">
<input id="searchbar" name="search" size="1" autocomplete="off" maxlength="27">
</div>
I have the following flex item (#globalSearchContLi) inside a flex-container. The container is an unordered list.
My problem is that I'm creating a fun looking search bar with a half-sphere submit button. The button is pretty much attached to the search bar with inline-block and margin properties.
This bundle (the search bar and button) won't center in the div any way I try to.
I tried setting #globalSearchCont with a specific width and auto side margins, but the whole flexbox presentation won't display correctly on mobile.
Any suggestions/advice? Thanks in advance.
#globalSearchContLi {
flex-grow: 7;
margin: 0px 15px;
flex-basis: 100px;
}
#globalSearchContLi {
flex-grow: 7;
margin: 0px 15px;
flex-basis: 100px;
}
#munchGlobalSearchbar {
width: 240px;
height: 50px;
/* box-shadow: 0 0 0 1px#000,0 0 0 3px #FFF, 0 0 0 5px #333; */
font-weight: 300;
font-size: 1.6rem;
border-radius: 10px;
display: inline-block;
margin-top: 20px;
text-align: center;
background-color: #edad0c;
border-bottom: 2px solid #333;
border-top: 2px solid #333;
border-left: 2px solid #333;
}
#munchGlobalSearchbar::placeholder {
color: #000;
}
#globalSearchBtn {
background-image: url(../imgs/addOn/panEmoji.png);
width: 50px;
height: 51px;
margin: 0px 0px -17px -12px !important;
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
display: inline-block;
border: 2px solid #333;
background-color: #38b32b;
transition: .2s all ease;
}
.backImageCon {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
<li id="globalSearchContLi">
<div id="globalSearchCont">
<input placeholder="Search..." type="textbox" name="globalSearch" id="munchGlobalSearchbar">
<div id="globalSearchBtn" class="backImageCon"></div>
</div>
</li>
Use justify-content: center on the parent to horizontally center the button elements.
#globalSearchContLi {
list-style-type: none;
margin-left: 0;
}
#globalSearchCont {
display: flex;
justify-content: center;
height: 50px;
}
#munchGlobalSearchbar {
width: 240px;
font-weight: 300;
font-size: 1.6rem;
border-radius: 10px;
text-align: center;
background-color: #edad0c;
border-bottom: 2px solid #333;
border-top: 2px solid #333;
border-left: 2px solid #333;
}
#munchGlobalSearchbar::placeholder {
color: #000;
}
#globalSearchBtn {
background-image: url(../imgs/addOn/panEmoji.png);
width: 50px;
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
border: 2px solid #333;
background-color: #38b32b;
transition: .2s all ease;
margin-left: -10px;
}
.backImageCon {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
ul {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
<ul>
<li id="globalSearchContLi">
<div id="globalSearchCont">
<input placeholder="Search..." type="textbox" name="globalSearch" id="munchGlobalSearchbar">
<div id="globalSearchBtn" class="backImageCon"></div>
</div>
</li>
</ul>
input[type=text] {
margin-left: 63%;
margin-top: -100%;
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: black;
background-image: url('searchicon.png');
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 150px;
}
<form>
<input type="text" name="search" placeholder="Search..">
</form>
even after puttin margin-top -100% the search box is not going up. it stopped going up after -10%. Any help would be highly appreciated. Thanks in advance. :)
Use "position:relative" and "top:-100px". It will move your search box to move up. You can increase the 'top' value as you need.
input[type=text] {
margin-left: 63%;
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: black;
background-image: url('searchicon.png');
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
position: relative;
top: -100px;
}
input[type=text]:focus {
width: 150px;
}