This question already has answers here:
2 colors in one placeholder of input field
(3 answers)
Closed 4 years ago.
The placeholder should show Enter a name* with a white text but the * red.
I'm using Bootstrap 4 in Chrome. My HTML and CSS code are these:
.form-control::-webkit-input-placeholder::after {
color: red;
text-align: right;
font-size: 50px;
content: "*";
}
<input type="text" placeholder="Your Name" class="form-control py-4" style="background: #273a71; color: white; border: 0;">
To achieve expected result, use below option
Use span or label instead of placeholder (Using span, in case you want label and placeholder)
Use on focus to hide span with css
.placeholder{
color: white;
position: relative;
top: -30px;
}
.placeholder:after{
content: '*';
color: red
}
.form-control:focus + .placeholder {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<input type="text" class="form-control py-4" style="background: #273a71; color: white; border: 0;" required="required">
<span class="placeholder">Your Name</span>
codepen - https://codepen.io/nagasai/pen/GzQVev
Related
I want to preface this by saying that this website comes highly recommended and was recommended by my professor to help "learn on our own." My question is probably incredibly simple and I apologize if it seems as a "waste of space". I am doing an assignment that requires creating a submittable proper functioning form in vim using HTML and CSS for styling on the course's server.
I have it all laid out as is, however, I have multiple labels in the body ("First Name"/"Last Name" "Class year selection box"/ "address"/"City"/ and "email". The First Name, Last Name, and Email are all what I am trying to style as "red text" to denote that these are the required fields.
I have the code set up to where these are required in order to submit the form, but I cannot figure out how to style it in the header to where I can differentiate which labels need to be in "red". As it is now, when I insert " Label { color:red; } in the header, it turns all of the text into red. Is there a way to denote specific labels to be red and the non-required labels to remain in black text color? I have tried to insert numbers into the label inputs to denote the different labels in need of a red text color but it applies it to all of the text on the form.
Is there anyway to properly add an identifying feature into a label to allow only the chosen labels as being red?
I appreciate any feedback and I apologize again if this is a waste of time for seasoned coders/developers to have to answer this question. Any input is appreciated.
How my form looks now online
The header (that has it all red)
The (this is where I am lost with inserting class properly)
At your HTML file add a class to each label you want to target individually, e.g.
<span class="label firstName">Joe</span>
At your CSS target this class and format the way you want, e.g.
.firstName {color: #f44336;}
This will target your label with the class of firstName and color the text RED.
There are multiple ways to approach this. If you are allowed to use only HTML and CSS, you can try to create multiple div's in the HTML file and create a CSS property in the CSS file that "styles" the required fields.
HTML
<div class="forms-box">
<h2>My Forms</h2>
<form>
<div class="user-box">
<input type="text" name="" required="" />
<label>First Name</label>
</div>
<div class="user-box">
<input type="password" name="" required="" />
<label>Last Name</label>
</div>
<div class="user-box">
<input type="password" name="" required="" />
<label>Last Name</label>
</div>
<div class="user-box3">
<label>Class year</label>
<select type="checked" required="" name="class-year">
<option value="2021">2021</option>
</select>
</div>
<div class="user-box">
<input type="password" name="" required="" />
<label>Address</label>
</div>
<div class="user-box">
<input type="password" name="" required="" />
<label>City</label>
</div>
<div class="user-box">
<input type="password" name="" required="" />
<label>Email</label>
</div>
</form>
</div>
CSS
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: linear-gradient(#141e30, #243b55);
}
.forms-box {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
border-radius: 10px;
}
.forms-box h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}
.forms-box .user-box {
position: relative;
}
.forms-box .user-box input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.forms-box .user-box label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: 0.5s;
}
.forms-box .user-box3 label {
color: #fff;
font-size: 16px;
margin-bottom: 10px;
margin-right: 40px;
}
.forms-box .user-box3 select {
color: #000;
margin-bottom: 20px;
}
.forms-box .user-box input:focus ~ label,
.forms-box .user-box input:valid ~ label {
top: -20px;
left: 0;
color: #ff0000;
font-size: 12px;
}
I have created a mock up which lists all the required fields that need to be filled before submitting.
Here is the link to my mockup
What would be correct approach to aligning placeholder to the top of the field, while input text appearing normally in the middle?
Any way to do that with CSS on input/::placeholder only, or should i rather construct a wrapper with span that would disappear when active and input field below it?
Here's a fiddle of what i've got now: https://jsfiddle.net/ejsLfvdn/1/
And that's what it should look like up to customers will:
The input masks are not the case here, i'm only struggling with the placeholder being aligned to the top, while input should appear normally in the middle. The placeholder MUST disappear after filling input.
I don't think that you will be able to do this by directly targeting the placeholder pseudo class (::placeholder).
Only a small subset of CSS properties can be applied to this element and position is not one of them:
https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
I think you will need to take the approach of a wrapper with span and input and position appropriately.
You could use something like this with the only issue being the input must have the required attribute.
* {
box-sizing: border-box;
}
.input {
display: flex;
flex-flow: column-reverse nowrap;
border: 1px solid gray;
width: 220px;
}
.input input:valid + label {
opacity: 0;
}
.input input {
width: 100%;
padding: 10px;
border: none;
}
<div class="input">
<input required id="username" name="username" type="text" />
<label for="username">Username</label>
</div>
I hope I achieved what you need.
btw, I used jquery to hide the placeholder while typing and display it again if the field is empty.
$('.form-control').keyup(function(){
var val = $(this).val();
if(val == ""){
$('.placeholder').show();
}else{
$('.placeholder').hide();
}
});
.input-cont{
position: relative;
}
.form-control{
border: 1px solid #DDD;
border-radius: 5px;
height: 40px;
padding-left: 8px;
}
.placeholder{
position: absolute;
top: 5px;
left: 8px;
color: #3dc185;
font-size: 12px;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<form>
<div class="input-cont">
<span class="placeholder">Imię</span>
<input class="form-control" type="text" name="name">
</div>
</form>
</body>
</html>
You can use translateY(-100%) on your placeholder to move the text upwards and then give your textbox some padding at the top to reveal the text:
.placeholder-offset {
font-size: 20px;
padding-top: 25px;
}
.placeholder-offset::placeholder {
color: red;
transform: translateY(-100%);
}
<input type="text" placeholder="Username" class="placeholder-offset" />
This question already has answers here:
How do I add a Font Awesome icon to input field?
(8 answers)
Closed 4 years ago.
I was trying to use font awesome and place it inside a search box.
I used the ff html:
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2 search"
type="search"
placeholder="Search.."
aria-label="Search"
/>
</form>
And then to control the layout of the search I place the ff CSS:
input.form-control.mr-sm-2.search{
outline: none;
border: none;
font-size: 12px;
border-radius: 2px;
position: relative;
}
input.form-control.mr-sm-2.search:before{
content: "\f002";
font-family: 'FontAwesome';
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 13px;
padding-right: 15px;
position: absolute;
top: 15px;
left: 0;
}
Any idea why the font awesome icon don't work?
Did you check by F12 and see console tab? It may be you missing font file and image file.
You should use CDN link:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
I checked some and following could help you.
Put a font-awesome icon inside an input tag
try this
:before or other pseudo classes does not work on self closing elements sucs as <br/>, <img /> or <input /> tags
You can do this as follows
.search-wrap{
position: relative;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
max-width: 200px;
}
.search-wrap input{
border: 0px;
padding-left: 20px;
}
.search-wrap i.fa{
position: absolute;
left: 10px;
top:10px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="search-wrap">
<input class="form-control" type="text" Placeholder="Search here.." />
<i class="fa fa-search"> </i>
</div>
It is not showing because ::after and ::before[pseudo-elements] works only when they are defined in containing elements. read W3C specifications
This question already has answers here:
Align labels in form next to input
(8 answers)
Closed 5 years ago.
I am trying to create a settings page in HTML/CSS. I have a rounded corner div with some text and an input box inside.
I want to align the input boxes as seen in the image below with the red line. Is there a way in CSS to push the input boxes over and have them line up in each div?
CSS
.mainItem {
background-color: white;
color: #38434e;
padding: 10px;
border-radius: 10px;
margin-bottom: 10px;
border: 1px solid #d6d9e5;
}
.pageInput {
position: absolute:
left: 200px;
}
HTML
<div class="mainItem">Business Name<input type="text" class="pageInput"></div>
<div class="mainItem">Address<input type="text" class="pageInput"></div>
Bhuwan's solution doesn't work and looks like this:
I would put your text in a label and give that a width:
.mainItem {
background-color: white;
color: #38434e;
padding: 10px;
border-radius: 10px;
margin-bottom: 10px;
border: 1px solid #d6d9e5;
}
.mainItem>label {
display: inline-block;
width: 150px;
}
<div class="mainItem"><label for="input1">Business Name</label><input type="text" id="input1" class="pageInput"></div>
<div class="mainItem"><label for="input2">Address</label><input type="text" id="input2" class="pageInput"></div>
Labels make your form more accessible too as you can now click on the label to focus your input
Firstly, you don't need position absolute for this. Second, use labels for your input fields and give them the same width:
<div class="mainItem">
<label for="input1">Name </label>
<input type="text" class="pageInput" id="input1">
</div>
<div class="mainItem">
<label for="input2">Address</label>
<input type="text" class="pageInput" id="input2">
</div>
In the CSS:
.mainItem label {
width: 20%;
display: inline-block;
}
This question already has answers here:
How to style a checkbox using CSS
(43 answers)
Closed 8 years ago.
Actually I'm styling the radio button with this trick:
HTML:
<div class="radioButt" >
<h1>Radio:</h1>
<p>Val1 : <span></span><input type="radio" id="1" checked="checked" name="radio" ><span></span></p>
<p>Val2 : <span></span><input type="radio" id="2" name="radio" ><span></span></p>
<p>Val3 : <span></span><input type="radio" id="3" name="radio" ><span></span></p>
</div>
CSS:
.radioButt p {
padding: 10px;
}
.radioButt span{
position: relative;
right: 0;
width: 25px;
height: 25px;
line-height: 25px;
padding: 3px;
color: #FFF;
text-align: center;
background: #c06f59;
}
.radioButt span:after{
content: "no"; /*if CSS are disbled span elements are not displayed*/
}
.radioButt input{
position: relative;
right: 0;
margin: -26px;
width: 31px;
height: 31px;
/*hide the radio button*/
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
cursor: pointer;
}
.radioButt input[type="radio"] + span{ /*the span element that immediately follow the radio button */
visibility: hidden; /*temporarily hide the "YES" label*/
background: #6EB558;
}
.radioButt input[type="radio"] + span:after{
width: 30px;
display: inline-block;
content: "yes"; /*if CSS are disbled span elements are not displayed*/
}
.radioButt input[type="radio"]:checked + span{
visibility: visible; /*show the "YES" label only if the radio button is checked*/
}
A working example could be found at: http://jsfiddle.net/rzt3c/2/
I want to create the same effect also for the checkbox input.
I tried to add the type "checkbox" in the css but it seem to don't work...infact when the checkbox is checked id doesn't return unchecked. ( Here there is the code: http://jsfiddle.net/rkCMa/1/ )
UPDATED ANSWER
The reason below is still correct, but there's a much easier way to do it still with CSS (bearing usability restraints still...) by using the pointer-events style. Add this to your styles:
.radioButt span{
pointer-events: none;
}
That will allow the spans to be clicked through so the post span won't block the input anymore. This should answer your question, but do keep in mind some of the usibility issues mentioned in the comments to your original question.
The reason its not working is when it displays the "Yes" that span is over the input and so it is the span that is actually being clicked and not the input. I would change the formatting so that both of the spans are before the input, and use classnames on them to distinguish and style them rather than css selectors. Something like:
<div class="radioButt" >
<h1>Checkbox:</h1>
<p>Ck1 : <span class="no"></span><span class="yes"></span><input type="checkbox" id="ck1" checked="checked" ></p>
<p>Ck2 : <span class="no"></span><span class="yes"></span><input type="checkbox" id="ck2" ></p>
<p>Ck3 : <span class="no"></span><span class="yes"></span><input type="checkbox" id="ck3" ></p>
</div>