i was styling the place holder and i use ..
::-webkit-input-placeholder{
font-family: 'Source Sans Pro', sans-serif;
color: #535252!important;
font-size: 18px;
position: relative;
bottom: 03px;
font-weight: 600;
}
But that is one style , how can i apply multiple styles in one place Holder as you can see in the picture
Looks like it's more complex (not only input element). Something like this:
<div class="wrapper">
<label class="prefix">
Prefix:
</label>
<input type="text" placeholder="placeholder" />
</div>
and a css:
div.wrapper {
border: 1px solid blue;
width: 300px;
padding: 4px;
}
div.wrapper input {
border: 0 none;
background-color: transparent;
outline: none;
}
See example
Related
I have an issue where the cursor/blinker is right in the top left of the textarea with no margin or whatsoever. I don't know what could be causing this, the other inputs are working fine. Here is a screen shot:
I also wanna know how to change that black border color? I would like the border to stay the same when I click on it. I tried using textarea:focus to get rid of it but it's not working.
Lastly I wanna get rid of this whitish background when a form gets auto-completed, I haven't figured out how to get rid:
HTML:
<form class="form appear appear-hidden" method="post">
<h1>Contact Me</h1>
<div class="name-section">
<input type="name" placeholder="Name" required />
<input type="surname" placeholder="Surname" required />
</div>
<input type="email" placeholder="Email" required />
<textarea
class="message"
type="message"
placeholder="Message"
row="4"
required
></textarea>
<input class="submit" type="submit" placeholder="submit" />
</form>
CSS:
.name-section input {
width: 48%;
margin: 5px;
border: 2px solid white;
padding: 10px;
background-color: transparent;
font-weight: 600;
}
form input {
width: 98%;
margin: 5px;
border: 2px solid white;
padding: 10px;
/* background-color: #000; */
background-color: transparent;
font-weight: 600;
color: white;
font-family: 'Poppins', sans-serif;
}
input::placeholder {
font-family: 'Poppins', sans-serif;
color: white;
font-weight: 600;
}
input:focus {
border: 1px solid white;
}
textarea {
min-height: 100px;
background-color: transparent;
color: white;
font-family: 'Poppins', sans-serif;
width: 98%;
margin: 5px;
border: 2px solid white;
resize: none;
font-weight: 600;
}
textarea::placeholder {
color: white;
padding: 10px;
margin: 10px;
font-weight: 600;
}
Thanks in advance for the help.
You have no padding in your Textaria, try this: remove padding from textarea::placeholder and add padding to .message :
textarea::placeholder {
margin: 10px;
font-weight: 600;
}
.message{
padding:10px;
}
To remove the "black-border-color:
input:focus{
outline:solid 3px blue;
}
I didn't understand what you mean by this: "Lastly I wanna get rid of this whitish background when a form gets auto-completed, I haven't figured out how to get rid:"
I have a login form section that I have enclosed inside a div. I want this section of the page only to be styled by the css shown below. However, when I add the css in the style, it isn't applied. I think it is down to syntax. I am trying to add styles within styles.
<div class="login-form">
<form action="/action_page.php" method="post">
<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
The existing css is below (note there is bootstrap enabled and the bottom part of the css is relevant to another part of the site -the intro part and div)
It's in the first part
.login-form {
body {font-family: Arial, Helvetica, sans-serif;}
that I've tried to refer to the div class for the form I want styled.
<style>
.login-form {
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
}
.intro-text {
width: 1000px;
padding:15px;
margin:40;
}
Can someone point out the error with some best practices on applying several styles to one div. I have already applied styles correctly, as can be seen with the
intro-text {
width: 1000px;
padding:15px;
margin:40;
}
which is correctly applied to:
<div class="intro-text">
<h1 class="display-5">Login</h1>
<p>Welcome back</p>
</div>
I cannot figure out how to apply the more complex styles to just the login-form div class and have tried several things.
The css you have is not valid. You cannot nest css blocks like that. I would recommend take a look at the css selectors.
Let's say you want to target a button inside the div with class login-form. Instead of doing this:
.login-form{
button{
//this doesn't work
}
}
You should do this:
.login-form button{
//css here
}
.login-form {
font-family: Arial, Helvetica, sans-serif;
}
.login-form form {border: 3px solid #f1f1f1;}
.login-form input[type=text], .login-form input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.login-form button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
.login-form button:hover {
opacity: 0.8;
}
.login-form .cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.login-form .imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
.login-form img.avatar {
width: 40%;
border-radius: 50%;
}
.login-form .container {
padding: 16px;
}
.login-form span.psw {
float: right;
padding-top: 16px;
}
.intro-text {
width: 1000px;
padding:15px;
margin:40;
}
Here is a snippet with the proper css:
<link rel="stylesheet" href="style.css">
<div class="login-form">
<form action="/action_page.php" method="post">
<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</div>
Syntax use is not correct , nesting in css shoud be in you case like
.login-form form {
// css code here
}
so apply selector and space and other selector for nesting properties
so every css rules in your code to be applyed only to this page , should be preceded with parent selector (.login-form) in your case .
but for the body , it cant be applied by this way ,
to apply some font for only this page , you could use by example :
adding class to body in this page then apply css as :
<body class="login-page">
// rest of html
</body>
and css should be :
body.login-page {font-family: Arial, Helvetica, sans-serif;}
Also I forget to mention that the syntax you used before, is like the scss syntax, but it should be precompiled to browser understandable css formt , thus you project should as modern web project to precompile scss to css .
I want to keep dollar symbol at beginning of text box. I am able to achieve this using the below code.
It works find in chrome and IE. The dollar symbol goes and sits next to label in firefox. How do i fix this problem? And for aligning the dollar symbol inline with text i use top 2px. Is there a way to better the css code.
.input-symbol-dollar:after {
color: #37424a !important;
content: "$";
font-size: 16px !important;
font-weight: 400;
left: 10px;
position: absolute;
top: 2px;
}
.input-symbol-dollar {
position: relative;
}
.abc-input {
border: 2px solid #c9c9c9;
box-shadow: none;
color: #6b6f72;
font-size: 0.9375rem;
text-transform: none;
width: 100%;
color: #37424a !important;
font-family: "Roboto Regular", sans-serif;
font-size: 16px !important;
font-weight: 400;
height: 42px !important;
padding-left: 17px !important;
display: inline-block !important;
}
label {
color: #37424a;
display: inline-block;
font-family: "Roboto Bold", sans-serif;
font-size: 15px;
font-weight: 700;
margin-bottom: 8px;
}
<label for="abcInput" class="abc-label">lable filed </label>
<span class="input-symbol-dollar">
<input type="text" id="abcInput" tabindex="0" name="abc" class="abc-input " placeholder="0.00"></span>
https://jsfiddle.net/8jdek3zt/5/
It looks like there's a lot of unnecessary code in your example.
Here's a simplified version that works on Chrome, Firefox and IE (not tested in Safari).
span {
display: inline-block;
position: relative;
}
input {
border: 2px solid #c9c9c9;
box-shadow: none;
font-family: "Roboto Regular", sans-serif;
font-size: 1.5em;
height: 42px;
padding-left: 20px;
}
span::before {
content: "$";
font-family: "Roboto Regular", sans-serif;
font-size: 1.5em;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
}
<span>
<input placeholder="0.00">
</span>
Here's an explanation of the vertical centering method for the pseudo-element:
Element will not stay centered, especially when re-sizing screen
The reason why this is happening is because the span is an inline element, so it's positioning isn't calculated as you are expecting it to be. The easiest solution would be to set display: block on the <span class="input-symbol-dollar">
As for positioning it in a cleaner way, you could consider making the symbol display block as well, with a height 100% of the input and set the line-height equal to the input height. I've updated your fiddle but the relevant code is below:
https://jsfiddle.net/chzk1qgm/1/
.input-symbol-dollar {
position: relative;
display: block;
}
.input-symbol-dollar:after {
color: #37424a !important;
content: "$";
font-size: 16px !important;
font-weight: 400;
position: absolute;
display: block;
height: 100%;
top: 0;
left: 10px;
line-height: 46px; // height of input + 4px for input border
}
Alternatively, you could just change the span to a div, as a div is a block level element by default. The rest of the styles would remain the same though.
try putting span in div.
<label for="abcInput" class="abc-label">lable filed </label>
<div>
<span class="input-symbol-dollar">
<input type="text" id="abcInput" tabindex="0" name="abc" class="abc-input " placeholder="0.000">
</span>
</div>
.custom-text{
border: 2px solid #DDD;
width: 100%;
padding: 5px;
}
<div class="custom-text">
<span>$</span>
<input style="border: none;"/>
</div>
How can I make the Email and Password fields separated by the exact height of their icons? I tried using line-height but it only seems to work on text.
Of course I could simply look at the height of the icon in Firefox's Web Inspector and then say margin-bottom: xx px, but is that really the best way to do it?
My code looks like this:
<form class="signup-field">
<h1>Enter your email to start.</h1>
<h2>Choose a strong password.</h2>
<div class="input-group">
<span class="input-group-addon"></span>
<input type="text" class="form-control" placeholder="Email" /><br />
</div>
<div class="input-group">
<span class="input-group-addon"></span>
<input type="password" class="form-control" placeholder="Password" /><br />
</div>
<div class="input-group t-c-submit">
<input type="checkbox">I agree to the terms and conditions.
<button type="button" class="button">Get Started</button>
</div>
</form>
and my CSS looks like this:
#font-face {
font-family: "simple-line";
src: url("simple-line-icons-24.woff") format('woff');
}
.container {
max-width: 880px;
}
.signup {
background-color: #48b7d6;
color: #fff;
font-family: Montserrat;
}
.signup h1 {
font-size: 3.2em;
}
.signup h2 {
font-size: 1.188em;
}
.signup-field input {
background: none;
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px dotted #dce3e7;
margin: 10px;
color: #fff;
}
.signup-field input::placeholder {
color: #fff;
}
.signup-field button {
float:right;
font-size: 1.188em;
background: none;
color: #fff;
border: 1px solid #dce3e7;
margin: 12px;
min-width: 140px
}
.signup-field button:hover {
background-color: #2fa1ba;
}
.signup-field .input-group-addon {
font-family: simple-line;
font-size: 1.188em;
border: 1px solid #dce3e7;
background: none;
border-radius: 0;
color: #fff;
}
/* Bootstrap overrides (also the above 3 lines) */
.input-group {
width: 100%;
line-height: 200%;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I trying to align this code
to get something like
how to write right syntax, to do right peace of code showing in picture, align to look like in picture?
Here's an updated Fiddle that gets you a little closer to what you need. So what did I do?
First, your HTML needs a lot of cleaning up. I did a small amount, but I would suggest that you spend some time going through it, indenting things correctly, and breaking it into logical sections.
For the right hand side, I broke each row into its own div to logically separate them. This makes it easier to style consistently.
The controls in each row were given fixed pixel widths to help with alignment. A bit of a hack, but in this case it works.
#starikovs suggests using Flexbox, which is something you should research further. I would also suggest you spend some time learning about how to structure your HTML cleanly first. The fiddle I linked to here is only a quick cleanup!
Edit
In the interests of keeping everything in one place, I've copied the code here:
HTML
<form id=fbid26588961 name=fbid26588961>
<div class="full-info_auction-operations">
<div class="full-info_auction-buy">
<div class="auction-value">
BuyNow
<span>5394 €</span>
</div>
<input disabled id=buynow1 onclick="newcmd('cmd.asp?op=buynow&carid=26588961');" type=button value="BuyNow">
</div>
<div class="full-info_auction-raise">
<div class="auction-value">
Current Price
<span>900 €</span>
</div>
<input type=button style="font-size:10px;" value="+100" onclick="pliusZZ(100);">
<input type=button style="font-size:10px;" value="+200" onclick="pliusZZ(200);">
<input type=button style="font-size:10px;" value="+500" onclick="pliusZZ(500);">
</div>
<div class="full-info_auction-confirm">
<div class="auction-value">
Your Bid
<div class="ctrl_row">
<input placeholder="1000 €" class="robot i12" id=sumbid26588961>
<input type=checkbox onclick="fbid26588961.pbtn.disabled=!this.checked;" >
<input disabled name=pbtn onclick="placebid26588961();" type=button class="confirm-button" value="Confirm" />
</div>
<label class="confirm-raise">
<input placeholder="for bot" class="robot confirm-modify i12" />
<input class="checkbox-controller" type="checkbox" name="country" onclick="fbid26588961.rbtn.disabled=!this.checked;if(!this.checked){disablerobot26588961();}" />
<input onclick="enablerobot26588961();" name=rbtn type=button disabled value="Enable robot">
<div class="checkbox"></div><span><div style="color:red">Robot disabled</div></span>
</label>
</div>
</div>
</div>
<div class="clear"></div>
</form>
CSS
/* ORIGINAL CSS */
input[type="button"] {background: #5267ff; border-radius: 3px; border: none; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 11px; padding: 10px 14px; text-transform: uppercase;color:inherit;}
input[type="button"]:hover {background: #4758d2;}
.full-info_auction-operations {margin: 0 40px 0 85px; padding-top: 17px;}
.full-info_auction-operations input[type="button"] {display: inline-block; /*vertical-align: bottom;*/}
.full-info_auction-buy {max-width: 235px; display: inline-block; margin-right: 5px; padding: 5px 0 10px;}
.full-info_auction-operations.auction-value {font-family: 'Open Sans', sans-serif; font-size: 12px; color: #b1b1b1; display: inline-block; vertical-align: middle; text-align: left; line-height: 20px;margin: 0px 7px 0 0;}
.full-info_auction-operations.auction-value span {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: #000; display: block;}
.full-info_auction-raise {max-width: 265px; display: inline-block; border-left: 1px solid #e7e7e8; border-right: 1px solid #e7e7e8; padding: 5px 10px 10px;}
//.full-info_auction-raise input[type="button"] {padding: 10px 11px 10px 10px; background: #000;}
.full-info_auction-confirm {max-width: 215px; display: inline-block; margin-left: 5px; padding: 5px 0 10px;}
.full-info_auction-confirm .auction-value {margin-right: 7px;}
.full-info_auction-operations > div {
vertical-align: top;
}
/* NEW CSS BELOW */
.auction-value { float: left; font-size: 80%; color: #888; margin-right: 5px; }
.auction-value span { display: block; color: #000; }
.full-info_auction-buy input[type='button'] { color: #fff; }
.full-info_auction-raise input[type='button'] { background: #000; color: #fff; }
.robot { width: 50px; }
.ctrl_row { margin-bottom: 5px; }
.ctrl_row input[type='button'],
.confirm-raise input[type='button'] { width: 120px; }
.confirm-modify { color: #fff; }
You only have to add vertical-align: top; than it should work.
There you go :
.full-info_auction-operations > div {
vertical-align: top;
}
This should do the job. #Mario Kurzweil answer was the good one, don't know why it's downvoted.
In my opinion this Fiddle comes to your desired layout very close. My added CSS is placed at the end (start is marked with a /* */ ).
CSS I've added
.auction-value {
display: inline-block;
vertical-align: top;
color: #CCC;
padding: 0 5px;
}
.auction-value > span {
display: block;
font-weight: bold;
color: #000;
}
.full-info_auction-confirm {
max-width: 420px;
}
.auction-value > input {
display: inline-block;
}
.bot-container {
margin-top: 5px;
}
.bot-container > label > * {
display: inline-block;
}
::-webkit-input-placeholder {
color: black;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: black;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: black;
font-weight: bold;
}
:-ms-input-placeholder {
color: black;
font-weight: bold;
}
The new way of doing that is to use flexbox. Here's an example:
HTML:
<div class="wrapper">
<div></div>
<div></div>
<div></div>
</div>
CSS:
.wrapper {
display: flex;
}
That's all the styles you need.
BTW, you can use Autoprefixer to get the right browser prefixes.
Flexbox is supported by all the major browsers: http://caniuse.com/#search=flexbox