I would like to make a contactform like this one: http://line25.com/wp-content/uploads/2012/letter-form/20.jpg (a multi-line textarea where each line has a dotted border-bottom, like a notebook. So not just the bottom border of the field)
The name and e-mail fields I already have:
#contactform input[type="text"]{
border: none;
border-bottom: dashed 2px #c9c9c9;
width: 200px;
}
but I seem unable to fix the message part...? I thought it would be a textarea with some styling but I don't seem to get the right effect... Is it even possible to style each line separatly?
Thank you!
With textarea use an dot image as background.
#contactform textarea {
background: url("dot-bg.png");
}
only add this
<input type="text" class="field-name" value=""/>
<textarea class="field-message"></textarea>
input[type="text"].field-name{
border-bottom: dashed 2px #c9c9c9;
width: 300px;
}
textarea.field-message{
border-bottom: dashed 2px #c9c9c9;
width: 300px;
resize:none;
}
No use images, the size of the webpage is more.
You can add a div instead of textarea and add multiple input tags in it. Working JSFiddle https://jsfiddle.net/n16vrqda/ try this
label{
margin-right: 22px;
}
.message{
float: left;
margin-top: 10px;
margin-right: 10px;
}
input[type="text"].field-name{
border:none;
border-bottom: dotted 2px #c9c9c9;
width: 300px;
margin:10px;
}
.field-message{
float:left;
}
<label>Name : </label>
<input type="text" class="field-name" value=""/><br>
<label>Email : </label>
<input type="text" class="field-name" value=""/><br>
<div>
<label class="message">Message : </label>
<div class="field-message">
<input type="text" class="field-name" value=""/><br>
<input type="text" class="field-name" value=""/><br>
<input type="text" class="field-name" value=""/><br>
</div>
</div>
Related
I have a form with several input radio type:
<form class="search" action="{{ url_for('np.bkg') }}" method="post">
<input type="text" name="query" style="max-width:700px" placeholder="Search over bkg..." id="query" value="{{query}}" autocomplete="on" required>
<button type="submit"><i class="fa fa-search"></i></button>
<div>
<input type="radio" name="searchType" id="kmatch" value="kmatch" checked="checked"> match </input>
<input type="radio" name="searchType" id="kextraction" value="kextraction"> extract </input>
</div>
</form>
In my css I have this:
form.search input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 100%;
background: #f1f1f1;
border-radius: 15px;
}
Now, my question, how to create a different css style for the 2nd input radio type? The current 'input' css element will apply to both radio boxes.
EDIT: I think my css only applies to the first input type='text' tag. So the question is the same, how to make different css styles for 2 different input radio tags?
Try this (for more attractive and user-friendly layout):
<style>
.radio-label{
border: 1px solid #abc;
border-radius: 4px;
padding: 7px 7px 5px 3px;
cursor: pointer;
box-shadow: 0 0 10px #abc;
}
.radio-label.radio-1{
background-color: #ddf;
}
.radio-label.radio-2{
background-color: #eed;
}
</style>
<label class="radio-label radio-1" for="radio-1"><input type="radio" name="radio-btn" id="radio-1" >Radio 1</label>
<label class="radio-label radio-2" for="radio-2"><input type="radio" name="radio-btn" id="radio-2" >Radio 2</label>
EDIT: You can also play with radio inputs with:
.radio-label input{
width: 20px;
height: 20px;
position: relative;
top: 4px;
}
for different styles, you can either give the two elements two different classes and define style for those classes :
.radio-input1{
width:20px;
height:20px;
}
.radio-input2{
width:10px;
height:10px;
}
or you can give the two inputs, two different ids and repeat the above code:
#radio1{
width:20px;
height:20px;
}
#radio2{
width:10px;
height:10px;
}
for classes:
<input class="radio-input1">
for id :
<input id="radio1">
So the question is like this, how can I make user input area focused by pressing the label near it with css only?
Example:
username: some textbox
*pressing the "username" text will lead the focus to the textbox.
input:focus {
outline: 0;
border-bottom: 2px solid tomato;
}
input {
border: 0;
height: 30px;
padding: 0 5px;
border-bottom: 2px solid lightgrey;
}
<p>First method simply wrap input with label</p>
<label>Username
<input type="text" placeholder="username">
</label>
<p>Second method by for and id if they are two seprate elements</p>
<label for="username">Username</label>
<input type="text" placeholder="username" id="username">
I've got this piece of CSS/HTML code that works good on jsfiddle and when I do a test.html on my browser but when I try to use it on a wordpress page (style in style.css and html on the page) just does not work.
I checked all the possibilities I could, there is no overwriting from the style, no browser problem... little help?
This is the test site:
http://manuscript.bugs3.com/
https://jsfiddle.net/1zeatcxp/
input#show, input#hide {
display:none;
}
div#paragraph {
display:none;
}
input#show:checked ~ div#paragraph {
display:block;
}
input#hide:checked ~ div#paragraph {
display:none;
}
.showthis {
float: left;
background-color:#9b2f00;
border-style: solid black 1px;
color: #f2e07b;
padding: 5px;
box-shadow: 3px 3px 3px black;
text-align: center;
width: 80%;
}
.hidethis {
float: right;
background-color:#9b2f00;
border-style: solid black 1px;
color: #f2e07b;
padding: 5px;
box-shadow: 3px 3px 3px black;
<label for="show">
<div class="showthis">
<span>[Show]</span></div></label><input type=radio id="show" name="group"><label for="hide"><div class="hidethis"><span>[Hide]</span></div></label>
<input type=radio id="hide" name="group">
<div id="paragraph">Content</span>
It looks like your HTML is being mangled by the wordpress editor, this is what I see on your page:
<div class="showthis">[Show]</div>
<p><input id="show" name="group" type="radio"><label for="hide"><br>
</label></p>
<div class="hidethis">[Hide]</div>
<p><label for="hide"></label><br>
<input id="hide" name="group" type="radio"></p>
<div id="paragraph">
<p>Content</p>
</div>
As you already discovered, remove_filter ('the_content', 'wpautop'); is the correct way to deal with this problem. You must make sure to place this in the functions.php file of your theme.
Edit:
Try it with the following HTML:
<label for="show"><span class="showthis">[Show]</span></label>
<input type=radio id="show" name="group">
<label for="hide"><span class="hidethis">[Hide]</span></label>
<input type=radio id="hide" name="group">
<div id="paragraph">Content</div>
You should not be nesting block-level divs inside of label elements. It is not valid HTML, see https://stackoverflow.com/a/18609649/2126792.
I am making a web form which I have working and am simply trying to style it using CSS before building a site for it. I have found that after adding label tags I am getting errors when I click on another box it jumps to the First Name box, the only way to fill out the form is to use Tab.
my HTML:
<label>
<form action="Register Keys site/form.php" method="post">
First Name: <input type="text" name="first_name"><br>
Last Name: <input type="text" name="last_name"><br>
Email: <input type="text" name="email"><br>
Phone Number: <input type="text" name="phonenumber"><br>
Information on Key: <input type="text" name="keyinfo"><br>
Password: <input type="text" name="password"><br>
Password Hint: <input type="text" name="passwordhint"><br>
<textarea rows="5" name="message" cols="30" placeholder="Please add any additional comments here"></textarea><br>
<input type="submit" name="submit" value="Submit">
</form>
</label>
CSS:
label
{
float: left;
text-align: right;
margin-right: 15px;
width: 300px;
}
input
{
border:0;
padding:5px;
font-size:0.7em;
color:#aaa;
border:solid 1px #ccc;
margin:0 0 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 160px ;
}
textarea
{
border:0;
padding:5px;
font-size:0.7em;
color:#aaa;
border:solid 1px #ccc;
margin:0 0 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 160px ;
}
input:focus
{
border:solid 1px #EEA34A;
}
The written form is not correct, 'cos the entire form is wrapped in Label
when conventionally set so
<form action="">
<div> <label for=""> </ label> </ div>
<div> <input type="text"> </ div>
</form>
Which is possible without the div
You have wrapped a form element inside a label element. That’s invalid markup and has strange effects. See #verdesrobert’s answer for adequate use of label. And you should use label that way, for reasons of functionality.
But what are now trying to do, the styling of a form as a whole, can be done simply by setting CSS properties on the form element. For example:
form
{
float: left;
text-align: right;
margin-right: 15px;
width: 300px;
}
(To use your styling. I would not recommend setting the width and the indentation in pixels but in em units.)
This is how you should use Label tag
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
To resolve this issue you need to modify html part.
You just need to replace tag label to div. Also replace css class name label to div. By doing this you may have this issue resolved.
Regards,
Vishal Bagdai
Because of the way label tags work, if the user clicks on anything inside the label tag, it will refocus, toggling control to the form (thus putting the cursor in the first textbox).
See: http://www.w3schools.com/tags/tag_label.asp
Instead of label, you want to use a div, and give it an ID (eg. divID), then change your css to:
#divID
{
float: left;
text-align: right;
margin-right: 15px;
width: 300px;
}
or give it a class (eg. divClass) and change your css to:
.divClass
{
float: left;
text-align: right;
margin-right: 15px;
width: 300px;
}
html code
<div id="signup">
<p>
<label>Frist Name</label>
<input type="text"/>
<p>
<p>
<label>Last Name</label>
<input type="text"/>
<p>
<p>
<label>Email</label>
<input type="text"/>
<p>
<p>
<label>Mobile Number</label>
<input type="text"/>
<p>
<p>
<label>Password</label>
<input type="password"/>
<p>
<p>
<label>Re Password</label>
<input type="password"/>
<p>
</div>
and this is css
css
#signup{
width: 860px;
background-color: white;
border: 1px black solid;
padding: 0px;
margin: 0px;
}
#signup p label{
padding: 0.4em;
color: #0986e3;
}
#signup p input{
width: 300px;
padding: 0.4em;
}
if u run this code u will see the input files right and left , and that is not good , i can correct this problems using div or li , but i want the best practice for doing that , i want the input filds to be exaclty below each other
,this is the code in jsfiddle
http://jsfiddle.net/Wiliam_Kinaan/EfBD7/
Make the labels display as block elements. That way, you can set it's width. But you still need them to be inline. You need to apply either float:left, or display:inline-block so they act inline as well as block.
#signup p label{
display:inline-block;
width:100px;
}
/*or*/
#signup p label{
float:left;
width:100px;
}
If you want to support older browsers, then use the float:left. If you target new browsers, then display:inline-block is better. If you use the float approach, add this to the CSS to clear the float:
#signup p{
overflow:hidden;
zoom:1;
}
Here, I did it how I would do it. I stripped out the p and some css to make text right side. but you can of course add display:inline-block;width:300px; to the label and swap the label and input locations in html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#signup{
width: 500px;
background-color: #ececec;
border: 1px black solid;
padding: 0px;
margin: 0px;
}
#signup label{
font:12px arial;
color: #0986e3;
}
#signup input{
margin:10px;
width: 300px;
padding 0.4em;
}
#signup input[type=button]{
margin:10px;
width: 80px;
padding 0.4em;
}
</style>
</head>
<body>
<div id="signup">
<input type="text"/>
<label>Frist Name</label>
<input type="text"/>
<label>Last Name</label>
<input type="text"/>
<label>Email</label>
<input type="text"/>
<label>Mobile Number</label>
<input type="password"/>
<label>Password</label>
<input type="password"/>
<label>Re Password</label>
<input type="button" value="click me!" />
</div>
</body>
</html>
Give the label a definite width, like:
#signup p label{
padding: 0.4em;
color: #0986e3;
width: 100px;
display: inline-block;
}
Can you use table , might help your cause , see the example , sorry for not aligning the markup well.