How to properly vertically center placeholder in an input field?
input[type='text']{
background-color: rgba(255,255,255,.4);
border:3px solid rgba(0,0,0,.5);
min-height: 45px;
border-radius: 6px;
color:#fff;
}
input[type='text']::-webkit-input-placeholder {
font-size: 30px;
color: rgba(255, 255, 255, 0.4);
line-height: 30px;
text-transform: uppercase;
vertical-align: middle;
}
Here is the code https://jsfiddle.net/u6qfwg3w/
You forgot to add this css to input element:
input[type='text']{
font-size: 30px;
color: rgba(255, 255, 255, 0.4);
line-height: 30px;
}
Here is the fiddle: fiddle link
I believe that as you have set min-height: 45px you should set line-height: 45px too in input[type=text].
See that for the placeholder if you vary font-size, the placeholder will stay vertically centered.
Please let me know your feedback. Thanks!
input[type='text']{
background-color: rgba(255,255,255,.4);
border:3px solid rgba(0,0,0,.5);
min-height: 45px;
line-height: 45px;
border-radius: 6px;
color:#fff;
}
input[type='text']::-webkit-input-placeholder {
font-size: 25px;
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
vertical-align: middle;
}
fiddle here
Related
Well, I need applicable the effect ::hover in many buttons, but I don't know to do this. Look my code:
`.button-password-simples, .button-password-with-numbers, .button-password-shuffled, .chooser_button {
cursor: pointer;
display: inline-block;
position: relative;
margin: 0;
margin-top: 8px;
padding: 0;
font-size: 10pt;
text-align: center;
width: 90%;
height: 40px;
left: 10.5px;
background-color: #121213c0;
color: rgba(255, 255, 255, 0.856);
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-radius: 3.5px;
border: none;
box-shadow: 3px 3px 3px 1px rgb(0 0 0 / 11%);
}
`
Can seem strange, but this CSS connects that all the buttons haha
Ok! I accept suggestions for the updates and, the principal: solve my problem...
Thanks! <3
Try this, it's the simplest way to achieve the hover effect. Be careful here, applying the same style on buttons with different attributes may lead to undesired results in your code functionality.
.button-password-simples:hover, .button-password-with-numbers:hover, .button-password-shuffled:hover, .chooser_button:hover {
cursor: pointer;
display: inline-block;
position: relative;
margin: 0;
margin-top: 8px;
padding: 0;
font-size: 10pt;
text-align: center;
width: 90%;
height: 40px;
left: 10.5px;
background-color: #121213c0;
color: rgba(255, 255, 255, 0.856);
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-radius: 3.5px;
border: none;
box-shadow: 3px 3px 3px 1px rgb(0 0 0 / 11%);
}
I am trying to create a crud application in React.
As you can see from the picture, some buttons look different somehow I don't know why.
Could you please help me with finding the error, I can't find it and have spent hours on it.
As you can see from the picture, "Güncelle" and "Sil" buttons don't look the way they should be.
Picture:
ScreenShot
Here is my .js and .css file:
import React from "react";
import { useNavigate } from "react-router-dom";
import "./İlCrud.css";
export default function İlCrud() {
let navigate = useNavigate();
return (
<div id="il-crud-div">
<h3>İl CRUD</h3>
<div id="create-div">
<input type="text" name="ilKodu" placeholder="İl Kodu..."/>
<br/>
<input type="text" name="ilAdi" placeholder="İl Adi..."/>
<br/>
<input type="button" id="create" value="Yarat"/>
</div>
<div id="update-delete-div">
<input type="button" id="update" value="Güncelle"/>
<input type="button" id="delete" value="Sil"/>
</div>
</div>
);
}
Here, I have created one container div and created 2 divs inside of it. I have created some buttons and input areas.
#import url(https://fonts.googleapis.com/css?family=Prosto+One);
*
{
-webkit-transition: all 0.3s ease;
}
body
{
overflow: hidden;
margin: 0px;
padding: 0px;
font-family: 'Prosto One', cursive;
background: url('https://subtlepatterns.com/patterns/egg_shell.png');
_background: #eee;
}
#il-crud-div
{
color: #777;
border: 0px solid hsl(0, 0%, 69%);
width: 75%;
margin-left: 10%;
margin-top: 120px;
text-align: center;
padding: 40px;
padding-bottom: 300px;
padding-top: 40px;
border-radius: 3px;
box-shadow: 0px 0px 8px #777;
background: rgba(255, 255, 255, 0.6);
}
#create-div
{
color: #777;
border: 0px solid hsl(0, 0%, 69%);
width: 45%;
padding-top: 20px;
margin-right: 10%;
text-align: center;
box-shadow: 0px 0px 8px #777;
background: rgba(255, 255, 255, 0.6);
float: left;
}
#update-delete-div
{
color: #777;
border: 0px solid hsl(0, 0%, 69%);
width: 45%;
padding-top: 20px;
box-shadow: 0px 0px 8px #777;
background: rgba(255, 255, 255, 0.6);
float: left;
}
#create-div input
{
color: #777;
font-weight: bold;
width: 40%;
padding: 10px;
margin: 10px;
border: 1px solid #afafaf;
border-radius: 3px;
background: rgba(255, 255, 255, 0.5);
outline: none;
}
#create-div #create
{
color: white;
width: 15%;
border: 0px solid transparent;
outline: none;
cursor: pointer;
background: #0aee62;
}
#update-delete-div #update
{
color: white;
width: 15%;
border: 0px solid transparent;
outline: none;
cursor: pointer;
background: #1501c2;
}
#update-delete-div #delete
{
color: white;
width: 15%;
border: 0px solid transparent;
outline: none;
cursor: pointer;
background: #d60a0a;
}
If you look at your css code, you have "#create-div input". Even though you have an id selector on the input 'Button' it's taking on the css code because it's in the id="create-div" and it is an input. You didn't do the same for the update and delete inputs so it's missing the padding and such. Here the sandbox so you can see what I mean https://codesandbox.io/s/nostalgic-kare-jyf76?file=/src/styles.css:1040-1057
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
FontAwesome is missing one Icon and as such I have to fall back to using an svg.
<ul class="icons other">
<li><a>
<svg width="50" height="50">...</svg>
</a></li>
<li><a class="fab fa-soundcloud"></a></li>
<li><a class="fab fa-spotify"></a></li>
</ul>
with the following styling (scss),
.icons {
>li {
display: inline-block;
padding: 0;
>a, svg {
height: 50px;
width: 50px;
line-height: 50px;
font-size: 1.8em;
text-align: center;
border-radius: 50%;
color: rgba(255, 255, 255, 0.8);
box-shadow: 0 0px 2px rgba(255, 255, 255, 0.56);
}
.fab {
background-color: black;
}
}
}
Here is a demo fiddle: https://jsfiddle.net/Cains/owarL5p1/
As li are inline items, make them vertically middle, and make a as block elements because height width won't work on inline elements.
.icons {
>li {
display: inline-block;
padding: 0;
vertical-align:middle; /*** added this ***/
>a, svg {
height: 50px;
width: 50px;
line-height: 50px;
font-size: 1.8em;
text-align: center;
border-radius: 50%;
color: rgba(255, 255, 255, 0.8);
box-shadow: 0 0px 2px rgba(255, 255, 255, 0.56);
display:block; /*** added this ***/
}
.fab {
background-color: black;
}
}
}
https://jsfiddle.net/dk8eLcfm/
Edit: after #TemaniAfif comment.
Though above solution also worked, but I agree with Temani afif's point that, we can give vertical-align:top to svg, as it's also an inline element and can remove display block from a.
.icons {
>li {
display: inline-block;
padding: 0;
vertical-align:middle;
>a, svg {
height: 50px;
width: 50px;
line-height: 50px;
font-size: 1.8em;
text-align: center;
border-radius: 50%;
color: rgba(255, 255, 255, 0.8);
box-shadow: 0 0px 2px rgba(255, 255, 255, 0.56);
svg{
vertical-align:top;
}
}
.fab {
background-color: black;
}
}
}
https://jsfiddle.net/2bcamf86/1/
You can simply use display: flex to ul.icons
ul.icons.other { display: flex; }
Here's the demo: https://jsfiddle.net/krycLxb0/
The way this is set up is so that to create the illusion that the button is pressed, the padding of the outer container (.button) is changed, making the top padding more than the bottom. However, when this is activated, the other button seems to shrink down as well. Why does this happen, and how do I fix it?
Here's the source:
header {
letter-spacing: .04em;
font-weight: 900;
font-family: sans-serif;
}
.button {
padding: 4px;
padding-bottom: 12px;
border-radius: 6px;
display: inline-block;
transition: 300ms ease;
will-change: auto;
text-transform: uppercase;
text-align: center;
font-size: 14px;
text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.2);
}
.button span {
display: inline-block;
width: 10em;
padding: 1.2em;
border-radius: 2px;
background: #FF4A50;
}
.button:hover {
box-shadow: 0px 6px 0px 0px rgba(0, 0, 0, 0.2);
}
.button:active {
transition: none;
padding-top: 12px;
padding-bottom: 4px;
}
.button--filled {
background: #BC2E56;
color: white;
}
.button--filled span {
background: #FF4A50;
}
.button--dark {
background: rgba(65, 57, 76, 0.6);
}
.button--dark span {
background: #FFF8F2;
}
<header>
<a class="button button--filled" href="#"><span>Get Started</span></a>
<a class="button button--dark" href="#"><span>Learn more</span></a>
</header>
Because your buttons are now vertical-align: baseline. Just add vertical-align: top; to your .button. See fiddle
Could anyone show me some tutorials that make a button in css and doesn't require images? I googled it but everything involved images...
Thanks!
Um, define "button"? If you just want a basic button, you don't even need CSS, just use an HTML input or button tag...
<input type="button" value="Press me!" />
or
<button>Press me!</button>
If I understand you correctly, you want to make an arbitrary element look like a button?
Well ... just write CSS accordingly! Here's a kickoff example which makes a link look like a button:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3489881</title>
<style>
a.button {
display: inline-block;
padding: 0 2px;
background: lightgray;
border: 2px outset lightgray;
cursor: default;
}
a.button:active {
border-style: inset;
}
</style>
</head>
<body>
<p><a class="button">link</a>
</body>
</html>
This one is kind of dull but gets the trick done!
h1 {
font-family: Arial;
}
a {
display: inline-block;
padding: 2 5px;
background: lightgray;
border: 5px outset lightgray;
cursor: default;
text-decoration:none;
color: black;
}
a:hover {
background: gray;
}
CSS:
.button{
background-color: #000;
color: #FF6600;
font: bolder 1.0em Tahoma;
border: 1px solid Yellow;
padding: 2px;
}
.button:hover{
border: 1px solid Red;
}
HTML:
<input type="button" class="button" value="Button"/>
<input type="button" class="button" value="Another"/>
Try it: http://jsfiddle.net/eD9sf/
There are some awesome examples here - Pure CSS Buttons - of buttons that don't need any images but are legit. I think that you could add some gradients to some of them, but otherwise they looks exactly like the ones on Facebook, Twitter, Wordpress, etc. If you don't know much CSS, I'd suggest that you just copy one of those examples.
This is a very simple design, but looks pretty good
body {
font-family: Helvetica, sans-serif;
font-size: .8rem;
}
.button {
text-align: center;
background-color: #888;
border-top: 0px solid #fff; /*define the color of the upper border */
border-bottom: 3px solid #666;
border-radius: 2px;
}
.button:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); /* light overlay */
}
.button:active {
border-top-width: 2px; /* add this so it gets 'pushed down' */
border-bottom-width: 1px;
}
.button a {
color: #fff;
display: block;
text-decoration: none;
padding: .2rem;
}
/* Second button */
.button-link {
text-align: center;
color: #fff;
display: block;
text-decoration: none;
padding: .2rem;
background-color: #888;
border-top: 0px solid #fff; /*define the color of the upper border */
border-bottom: 3px solid #666;
border-radius: 2px;
}
.button-link:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); /* light overlay */
}
.button-link:active {
border-top-width: 2px; /* add this so it gets 'pushed down' */
border-bottom-width: 1px;
}
<div class="button">Click me</div><br/>
<a class="button-link" href="#">Click me, link only</a>
This one looks lovely, acording to me :)
.button {
color: rgba(255, 255, 255, 1);
background-color: rgba(61, 51, 119, 1);
font-weight: 500;
padding: 9px;
box-shadow: 0px 5px 0px rgba(31, 36, 78, 1), 0px 9px 12px rgba(0, 0, 0, .7);
width: 160px;
text-align: center;
transition: all .3s ease;
font-size: 15px;
border: none;
border-radius: 5px;
outline: none;
margin: auto;
font-family: "Century Gothic";
transform: scale(0.9);
}
.button:active {
box-shadow: 0px 2px 0px rgba(31, 36, 78, 1), 0px 2px 4px rgba(0, 0, 0, .9);
top: 6px;
transform: scale(0.9) translateY(3px);
}
<input class = 'button' type = 'button' value = 'Click' />