form area control in CSS - html

I am trying to set the properties in the text area using class text area.form-control but its is useless.My defined properties of textarea in formarea.form-control is not changing my text in the text area.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
background-color: aquamarine;
width:100%;
height:auto;
}
input[type="text"],textarea,textarea.form-control{
background-color:#efeeef;
width:396px;
height:48px;
border-radius:4px;
}
textarea.form-control{
line-height:50%;
font-size:16px;
color:red;
font-weight:500;
}
</style>
</head>
<body>
<div class="container">
<p>cxfdsgfdagfa
dsvkbdslkD
DSNBXCZBV<br>
SDAKFDSBVLSDF
<br>
dskfdskafbvsakdh
cxfdsgfdagfa
dsvkbdslkD
DSNBXCZBV<br>
SDAKFDSBVLSDF
<br>
dskfdskafbvsakdh
cxfdsgfdagfa
dsvkbdslkD
DSNBXCZBV<br>
SDAKFDSBVLSDF
<br>
dskfdskafbvsakdh </p>
<!--Form element-->
<form>
<fieldset>
<input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control textarea border-color outline" id="form-email" >
</fieldset>
</form>
</div>
</body>
</html>
Please tell me how can I change my activate font properties in textarea and I want to outline outside gray border of 3px in light gray gradient color. Please tell me how can I fix these issues?

foo is a type selector
.foo is a class selector
Your element:
<input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control textarea border-color outline" id="form-email" >
Is a member of the class textarea so .textarea would select it, but it is not of the type <textarea>, it is an <input> so textarea will not select it (but input will).
Note that giving class names the same names as standard HTML element types is a good way to create this type of confusion so is best avoided.

Your problem is that you are selecting a class that you dont assign to any component You should use
.form-control{
line-height:50%;
font-size:16px;
color:red;
font-weight:500;
}
instead of
textarea.form-control{
line-height:50%;
font-size:16px;
color:red;
font-weight:500;
}

Related

Customize material form color of Axentix framework

I'm working on a project using the Axentix framework.
I used their material forms and the animated bottom border color doesn't match with my website's main color.
Here is their input example : https://useaxentix.com/docs/forms/material
If someone has an idea to customize it, it will be really helpful.
Thanks a lot.
Happy to see you using Axentix !
As aprilunge explained, a way to custom the material forms color is to download the source files.
But there is another way we are gonna to custom any material element color without downloading the source files, we're going to add it on the docs soon.
To custom a material text-input, here is the code :
.form-material .form-field:not(.form-default).active textarea.form-control,
.form-material .form-field:not(.form-default)::after {
border-bottom: .1rem solid YOUR_COLOR;
}
.form-material .form-field:not(.form-default).active label {
color: YOUR_COLOR;
}
You can ask us if you want to change the checkboxes or radio colors too, but know that we are going to add these examples on the https://useaxentix.com/docs/forms/material soon.
If you need help and want to ask us any question, you can join us on gitter :
https://gitter.im/axentix/home
Here is an example :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/axentix#0.4.3/dist/css/axentix.min.css" />
<style>
.form-material .form-field:not(.form-default).active.is-txtarea-focused textarea.form-control,
.form-material .form-field:not(.form-default)::after {
border-bottom: .1rem solid #e92626;
}
.form-material .form-field:not(.form-default).active label {
color: #e92626;
}
</style>
</head>
<body>
<div class="container">
<h1>Example form</h1>
<form class="form-material">
<div class="grix xs1">
<div class="form-field">
<input type="text" id="name" class="form-control" />
<label for="name">Name</label>
</div>
<div class="form-field">
<label for="textarea">A textarea</label>
<textarea id="textarea" class="form-control"></textarea>
</div>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/axentix#0.4.3/dist/js/axentix.min.js"></script>
</body>
</html>
Have a great day !
Axentix team.
You can use the SCSS source files of Axentix. If you do so, you can overwrite the default variables with the needs for your project easily.
In your specific case the variable you search for is $material-color.

How can i insert vertical space between the rows(input text boxes and Labels)?

HTML
<!DOCTYPE html>
<html>
<head>
<title>Learning</title>
</head>
<body>
...
<h1>Testing</h1>
<span class="error">* Required</span>
<form name="SignUp" method="post" action="">
<fieldset>
<div>
<label>Name:</label><input id="NAME" type="text" name="name" placeholder="Name" required>
</div>
<div>
<label>Email:</label><input id="EMAIL" type="email" name="email" required>
</div>
<div>
<label></label><input type="submit" value="Send" >
</div>
</fieldset>
</form>
</body>
</html>
CSS
body {
background-color:#b0c4de;
font-family:"Times New Roman";
font-size:15px;
}
p {color:blue;}
.error {color: #FF0000;}
label {
display: inline-block;
width: 150px;
text-align: right;
margin-right:30px; //How far the label element and input box
margin-top:100px;
}
fieldset{
//border:none;
padding:15px;
width:500px;
margin:0px auto;
}
The Name: and input box are on one line and the next line is just touching it.
how do i put them apart.
Add a line-height to the div like below:
div{
line-height: 30px;
}
Fiddle
Note: Here, I have applied the property for div tag in general as it is only an example. In actual case, you might want to add a class for the div tags within the fieldset and apply the line-height only for that class. Doing it that way will make sure other div tags in the page aren't affected.
without getting too complicated, something simple as the following will produce the desired results
#NAME, #EMAIL, input[type=submit] {
margin-top:5px;
}
this gives your input fields a small space above so that they are spread out.
Note: I have used specific selectors to apply these values to the fields in your example only.
add below css to your code
div{
margin-top:10px;
}
you can change margin as your requirement.
There are many ways to implement this.
The simplest way is simply to insert a < BR > between label and the input tag.
A second way is to use a table and place the input in the cell below.
An alternative way is to use for example divs and place the label in one div and the input in another and use css techniques like float etc. This has the advantage of controlling everything via css.

css text vertical alignment changes from textarea element to input element

I'm not good in css and not able to quick fix this issue.
I have the following html, css code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>temp</title>
<meta name="generator" content="Studio 3 http://aptana.com/">
<meta name="author" content="Subhranath Chunder">
<!-- Date: 2011-08-19 -->
<style type="text/css">
div {
width:400px;
}
p, input {
display:inline-block;
height:80px;
}
ul.error-list, li {
display:inline;
}
</style>
</head>
<body>
<div>
<p><input type="text" value="Name" name="name" /></p><ul class="error-list"><li>Error 1</li></ul>
<p><input type="text" value="Email" name="email" /></p><ul class="error-list"><li>Error 1</li></ul>
<p><textarea name="address" />Address</textarea></p><ul class="error-list"><li>Error 1</li></ul>
</div>
</body>
</html>
The first two error messages corresponding to the first two input elements is getting vertically centered. But, for the textarea element, the error message is vertically at the bottom.
If I change the last element to input type element, then it gets vertically centered. But, I need the last element to be of textarea type.
Can anyone fix the css, and give an explanation of why it's behaving as such.
Try this.
<style type="text/css">
div {
width:400px;
}
p, input, textarea {
display:inline-block;
height:80px;
}
ul.error-list, li {
display:inline;
}
textarea {
vertical-align:middle;
}
</style>
As for why this happens: input and textarea are different elements, and they behave in different ways. Possibly because input only takes one line of text, and the error message is by default aligned to the bottom line of text, for inputs it looks as you want it to. But textarea takes many lines of text, so the error message aligns to the bottom of the element, rather than the bottom of the text in the element.

CSS - Two Column Form

I'm trying to reduce the amount of html markup related to presentation in my front end code. In a form I'm currently working on, I want to have 2 column of form fields. One way that will definitely do what I want is this:
<html>
<head>
<style>
body {width:400px;}
.col {width:200px; height: 100px; float:left; display:block;}
label, input {display:block;}
</style>
</head>
<body>
<div class="col">
<label>Field1:</label>
<input>
</div>
<div class="col">
<label>Field2:</label>
<input>
</div>
</body>
</html>
I want to achieve the same results when rendered in browser WITHOUT the div tags in the mark up. So I did something like this:
<html>
<head>
<style>
body {width:400px;}
label,input {width:200px; height: 30px; float:left; display:block;}
</style>
</head>
<body>
<label>Field1:</label>
<label>Field2:</label>
<input>
<input>
</body>
</html>
This is close, but I want the <label> markup tag to appear before each <input> markup tag in the code like so:
<label>field1</label>
<input>
<label>field2</label>
<input>
But problem here is that I can't think of maintainable css code that will make the label appear on top of each input field. Is there a good way to make both the mark up and the rendered result appear the way I want to?
One solution is to put the input inside the label..
<label>Field1:<input></label>
<label>Field2:<input></label>
then example CSS..
label {width:200px; height: 30px; display:inline-block;}
input {display: block;}
or
label,input {width:200px; height: 30px; display:inline-block;}
Seem's hacky, but this works.
http://jsfiddle.net/pxfunc/VCaMe/1/
using class="col1" or class="col2"...
HTML:
<form>
<label for="i1" class="col1">Label 1</label>
<input id="i1" class="col1" type="text" value="Input 1" />
<label for="i2" class="col2">Label 2</label>
<input id="i2" class="col2" type="text" value="Input 2" />
</form>
CSS:
form {width:600px;background-color:#eee;overflow:hidden;}
.col1 {display:block;float:left;line-height:30px;width:301px;height:30px;background-color:#f00;border:0;}
.col2 {position:relative;top:-30px;display:block;float:right;line-height:30px;width:299px;height:30px;background-color:#ff0;border:0;}
That said I still agree with the first comment under the question, seems like over-thinking a solution that could use div's or some kind of <label> & <input> wrapper

If I want my textarea to be hidden, how do I do it?

If I want my textarea to be hidden, how do I do it?
Everyone is giving you answers, but not much on the reasons. Here you go: if you use the CSS rule visibility:hidden; the text area will be invisible, but it will still take up space. If you use the CSS rule display:none; the textarea will be hidden and it won't reserve space on the screen—no gaps, in other words, where it would have been. Visual example below.
So you want something like this to be totally hidden:
<textarea cols="20" rows="20" style="display:none;">
Example
/* no styling should show up for either method */
textarea {
background: lightblue;
border: 1px solid blue;
font-weight: bold;
}
<p><strong>Textarea (not hidden)</strong></p>
<textarea>Text within.</textarea>
<p>Some text after.</p>
<hr />
<p><strong>Textarea with <code>display:none;</code></strong></p>
<textarea style="display:none;">Text within.</textarea>
<p>Some text after. Neither height nor margin/padding/layout kept. No other styles visible.</p>
<hr />
<p><strong>Textarea with <code>visibility:hidden;</code></strong></p>
<textarea style="visibility:hidden;">Text within.</textarea>
<p>Some text after. Height and margin/padding/layout kept. No other styles visible.</p>
You have a few options, here are some examples:
Display:none
Visibility:hidden
Here is some example code for you to see for yourself
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text Area Hidden</title>
<style type="text/css">
.hideButTakeUpSpace
{
visibility: hidden;
}
.hideDontTakeUpSpace
{
display:none;
}
</style>
</head>
<body>
<h1>Text area hidden examples</h1>
<h2>Hide but take up space (notice the gap below)</h2>
<textarea class="hideButTakeUpSpace" rows="2" cols="20"></textarea>
<h2>Hide Don't take up space</h2>
<textarea class="hideDontTakeUpSpace" rows="2" cols="20"></textarea>
</body>
</html>
See this jsFiddle Example
Using css: display: none; (this will make the textarea disappear completely, the space it would normally take up will not be reserved)
Hidden with occupy the space on current webpage.
<textarea style="visibility:hidden"></textarea>
Disappear on current webpage with no other effect.
<textarea style="display:none" ></textarea>
<!DOCTYPE html>
<html>
<head>
<style>
textarea.none {
display: none;
}
textarea.hidden {
visibility: hidden
}
</style>
</head>
<body>
<textarea class="none">The display is none.</textarea>
<br>
<textarea class="hidden">visiblity is hidden</textarea>
<br>
<textarea >This is visible and you can see a space taken visiblity:hidden</textarea>
</body>
</html>
Using the CSS visibility property should do the trick.