I have a form with this code:
<div id="zipcode-label" class="f-label"><label for="zipcode" class="required">Zip code</label></div>
<div id="first-element" class="f-element"><input type="tel" class='rounder' size="5" name="zipcode" id="zipcode" placeholder="Your Zip code" value="" tabindex="2" pattern="[0-9]{5}" title="Five digit zipcode" required></div>
I want to hide the label part (I don't want to delete it), so I tried using style="display:none", but for some reason it also hides the placeholder of the field.
Any way to resolve this?
Hiding the label with display:none; should not effect the placeholder of the input:
label[for="zipcode"] {
display:none;
}
<div id="zipcode-label" class="f-label"><label for="zipcode" class="required">Zip code</label></div>
<div id="first-element" class="f-element"><input type="tel" class='rounder' size="5" name="zipcode" id="zipcode" placeholder="Your Zip code" value="" tabindex="2" pattern="[0-9]{5}" title="Five digit zipcode" required></div>
Try with this
.f-label label{display:none}
#zipcode-label {
display: none;
}
works for me in JSFiddle, but I don't have your internal or external stylesheets so that may be a huge part of the equation
Related
please tell me how can I add a style padding-left or margin-left to the text that was entered in input field
<input name="keyword" type="text" placeholder="Job title, Keywords or Company Name"/>
input {
padding-left: 10px;
}
<input name="keyword" type="text" placeholder="Job title, Keywords or Company Name"/>
there are multiple ways to add style.
most preferable is
<input name="keyword" type="text" class="txtCSS" placeholder="Job title, Keywords or Company Name"/>
and then add style to that class like,
.txtCSS{
margin-left: 10px;
padding-left: 10px;
//you can add more styles if you require.
}
second way is to bind css inline like these, but it's not preferable and mostly used when need to apply style on page only.
<input name="keyword" type="text" Style="margin-left:10px; padding-left:10px;" placeholder="Job title, Keywords or Company Name"/>
you can add class or id to particular input and you can give style to it.
.abcd{
padding-left:15px;
}
<input name="keyword" type="text" class="abcd" placeholder="Job title, Keywords or Company Name"/>
I have a form field box with class CCPPDisplayTD.
I'm trying to make it's length longer with CSS styling.
How do I use CSS to accomplish this?
<form>
<input type="text" /><br />
<input type="text" class="CCPPDisplayTD" />
</form>
.CCPPDisplayTD{
width: 200px;
}
See here: http://jsfiddle.net/GT8jD/
In your stylehseet you need the following:
.CCPPDisplayTD{
width: 250px; // whatever size you need.
}
Your HTML needs to resemble something similar to:
<form>
<label> /* Label elements are required for better accessibility */
<input type="text" class="CCPPDisplayTD" />
</label>
</form>
Or the following:
<form>
<label for="input-name"> /* Label elements are required for better accessibility */
<input type="text" class="CCPPDisplayTD" id="input-name" name="input-name" />
</label>
</form>
I'm using SimpleForms to publish a form on a Joomla 2.5 site.
The problem is that the checkbox and the options are on 2 different lines
The html generated is :
<form method="post" id="simpleForm2_142" name="simpleForm2_142" enctype="multipart/form-data" class="simpleForm">
<input type="hidden" name="moduleID" value="142" autocomplete="off">
<input type="hidden" name="task" value="sendForm" autocomplete="off">
<input type="hidden" name="Itemid" value="230" autocomplete="off">
<input type="hidden" name="url" value="http://xxx" autocomplete="off">
<style type="text/css">
form.simpleForm label{display:block;}
form.simpleForm label span{color:#ff0000;}
form.simpleForm input.inputtext{width:215px;}
form.simpleForm textarea.inputtext{width:215px;height:100px;}
form.simpleForm textarea.inputtext_small{width:215px;height:50px;}
</style>
<p><label for="sf2_142_nom">Nom <span>*</span></label> <input type="text" name="sf2_142_nom" id="sf2_142_nom" class="inputtext" value="" autocomplete="off"></p>
<p><label for="sf2_142_prnom">Prénom <span>*</span></label> <input type="text" name="sf2_142_prnom" id="sf2_142_prnom" class="inputtext" value="" autocomplete="off"></p>
<p><label for="sf2_142_adresse">Adresse <span>*</span></label> <textarea name="sf2_142_adresse" id="sf2_142_adresse" class="inputtext"></textarea></p>
<div class="chkbox"><label for="sf2_142_label">Label</label>
<input type="checkbox" name="sf2_142_label[]" id="a7c1272bf8f1dfd06b1d0f85e31ac1b1" value="option1" autocomplete="off">
<label for="a7c1272bf8f1dfd06b1d0f85e31ac1b1">option1</label>
<input type="checkbox" name="sf2_142_label[]" id="29def0c43615fa46358f41e04e9b07ee" value="option2" autocomplete="off">
<label for="29def0c43615fa46358f41e04e9b07ee">option2</label>
</div>
<p><input type="submit" value="Envoyer" autocomplete="off"></p>
</form>
I would like to use some css to make them keep on one only line
Any hint would be welcome !
EDIT :
I'm using simpleforms 2 for Joomla - here's the homepage of this extension :
http://allforjoomla.com/xmodules/mod-simpleform2
EDIT 2 :
Sorry I don't get it to make things clear when answering to your answers - as soon as I want to enter a new line it saves my answer - so my edit here :
Thanks for your answers, But if I do so I will get all this on one line :
Label <checkbox> option1 <checkbox> option2
I want to get :
Label
<checkbox> option1
<checkbox> option2
EDIT 3 :
Its Better with :
form.simpleForm label:first-child { display: block; }
But I get :
Label
<checkbox> option1 <checkbox> option2
And this is what I try to get :
Label
<checkbox> option1
<checkbox> option2
Making element inline will your issue.
form.simpleForm label, form.simpleForm div.chkbox input{ display:inline !important}
You could just remove this line:
form.simpleForm label {
display: block;
}
Or, if you want to keep the first label (as mentioned in the note below) as a block element, do this instead:
form.simpleForm label:first-child {
display: block;
}
I was wondering if it is possible to specify elements in CSS where an attribute is equal to one of two values, something like this:
input[type=text][type=password]
However this selector does not seem to work (I assume because specifying the same attribute twice is not valid), does anyone know how to do this?
You may simply list them as individual selectors:
input[type="username"],
input[type="password"] {
color: blue;
}
<form>
Username: <input type="username" name="Username" value="Username" />
Password: <input type="password" name="Password" value="Password" />
<input type="submit" value="Submit" />
</form>
One option nowadays is :is, a little cleaner and saves characters as the list of selectors increases:
<style>
input:is([type=text], [type=password]) { background-color: red }
</style>
<input type="text"> red
<input type="password"> red
<input type="email"> white
MDN has some useful examples that show where a major reduction in the number of selectors can be had using :is https://developer.mozilla.org/en-US/docs/Web/CSS/:is
I have seen forms that can do this without using <br /> etc.
Here's my form:
<form id="staff-login" name="staff-login" action="/staff/login/" method="POST">
<label for="staff-login-email">Email</label>
<input type="text" id="staff-login-email" name="email" value="" />
<label for="staff-login-address">Password</label>
<input type="password" id="staff-login-password" name="password" value="" />
<input type="submit" id="staff-login-submit" name="submit" value="Login" />
</form>
And an example of what I'm taking about:
http://img694.imageshack.us/img694/4879/43201622.gif
All the examples I can Google insert extra <div>s and mess with the code, I'm wondering if there is a way with the code I have (or if you can structure my code "better") to achieve what I need?
using css, float your label to the left. Also, make your input elements blocks with a decent margin...
label { float: left; width: 200px; }
input { margin-left: 220px; display: block; }
input.staff-login-submit { margin-left: 500px }
I've just guessed at a few numbers for the margins, so tweak as needed.
<label> and <input> are inline elements. Either you use <br /> (which is totally ok) or you specify them as block elements via CSS.
You can learn more about inline and block elements.