I know with the help of script it is possible. But due to some limitations can we do with the help of css3. Thanks in advance
yes. It is possible. You can use the following example.
HTML Code:
<input type="text" value="" class="email_field"/>
<label class="label">Email</label>
CSS code:
.email_field {
width:95%;
z-index:3;
position:relative;
background-color:transparent;
}
label {
position:absolute;
display:block;
top:3px;
left:4px;
z-index:1;
}
use placeholder attribute on input
<input type="text" placeholder="placeholder_text"/>
Related
I have a <label> tag that wraps checkbox. I want to define a style to that label if the checkbox is checked. Until now I've been relying on JavaScript but I see that there is a :has selector that might do what I want with CSS only
Here is my HTML:
<label><input type="checkbox name="param1"> Param 1</label>
Here is what I'm attempting in CSS:
label:has(input[type='checkbox']:checked){
background-color: #ccc;
}
However, it breaks my SCSS compiler before I even get to test it in a browser. I'm guessing that there is a CSS syntax error. My editor does highlight it as though there is an error, but I can't see where I've gone wrong.
https://developer.mozilla.org/en-US/docs/Web/CSS/:has
You can use something like this:
input[type='checkbox'] {
display:none;
}
label{
height:30px;
width:30px;
border:1px solid red;
display:inline-block;
}
input[type='checkbox']:checked + label{
background-color: #000;
}
<input type="checkbox" id="id">
<label for="id"></label>
Yes, css have :has selector but No browser supports it.
I hope, this help to you:
input:checked + label {
color: red;
}
<input type="checkbox" name="param1" id="rad">
<label for="rad">Param 1</label>
I'm here again asking :)
I am needing to have 2 types of buttons, one using "input button" and another using the tag "a" link.
But when trying to do this, "button" using the tag "a" is lower than the others, and I'm not able to make it stay in the same line of the other buttons.
I put the example in jsFiddle:
http://jsfiddle.net/mtsys/RLgEj/
<br><br><br>
<input name="btnSubmit" class="botao salvar" type="submit" value="Salvar" />
<input name="btnSubmit" class="botao excluir" type="submit" value="Excluir" />
<input name="btnSubmit" class="botao voltar" type="submit" value="Voltar" />
<a class="botao voltar" href="/Produto/Index">Voltar </a>
tks
Try this
.botao {
vertical-align: middle;
}
a.botao {
padding-top: 7px;
height: 24px !important;
}
http://jsfiddle.net/RLgEj/6/
Put this:
<body style="line-height:30px;">
See DEMO
http://jsfiddle.net/RLgEj/5/
add this to your css (last rule):
.botao {
background-color:#fff;
border-radius:6px;
border:1px solid #87a5b6;
display:inline-block;
color:#000;
font-family:Verdana;
font-size:12px;
font-weight:bold;
padding-left:32px;
padding-right :16px;
text-decoration:none;
cursor:pointer;
height:32px;
line-height: 32px;/* this is the magic */
}
i updated the Fiddle
<form name="fc">
<div class="input-text">
<input type="text" id="postquestion" name="postquestion" style="font-size:12px;"class="ps" value="" placeholder="What's Your Question..?" data-mini="true" />
<input type="submit" value="Ask" class="ask" data-inline="true" data-mini="true"data-theme="b"/>
</div>
</form>
this code is not working
.ask
{
margin-top:-10px;
}
i'm newbie to css , please help me. http://jsfiddle.net/shreeramns/4dRuP/
input is an inline-element, thus it cannot have any margin applied. You need to make it a block-level element:
.ask
{
display: inline-block;
margin-top:-10px;
}
Furthermore, you shouldn't use negative margins if possible, use positioning instead.
you may have to use float:left for both of the button and textbox
.ask{
margin-top:-10px;
display:inline;
position:relative;
float:left;
}
.ps{
float:left;
display:inline;
}
Preview >> http://jsfiddle.net/vmyc8/
This question already has answers here:
How to align input forms in HTML
(17 answers)
Closed 2 years ago.
I have a HTML form like:
<html>
Name:<input type="text"/></br>
Email Address:<input type="text"/></br>
Description of the input value:<input type="text"/></br>
</html>
Now the labels all begin in the same column but the text boxes are beginning in different positions as per the label's text length.
Is there a way to align the input fields such that, all the ":" and the text boxes, will begin in the same position, and the preceding text will be right aligned until the ":" ?
I am okay with using CSS if that can help achieving this.
Working JS Fiddle
HTML:
<div>
<label>Name:</label><input type="text">
<label>Email Address:</label><input type = "text">
<label>Description of the input value:</label><input type="text">
</div>
CSS:
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: right;
}
input {
display: inline-block;
float: left;
}
You could use a label (see JsFiddle)
CSS
label { display: inline-block; width: 210px; text-align: right; }
HTML
<html>
<label for="name">Name:</label><input id="name" type="text"><br />
<label for="email">Email Address:</label><input id="email" type="text"><br />
<label for="desc">Description of the input value:</label><input id="desc" type="text"><br />
</html>
Or you could use those labels in a table (JsFiddle)
<html>
<table>
<tbody>
<tr><td><label for="name">Name:</label></td><td><input id="name" type="text"></td></tr>
<tr><td><label for="email">Email Address:</label></td><td><input id="email" type = "text"></td></tr>
<tr><td><label for="desc">Description of the input value:</label></td><td><input id="desc" type="text"></td></tr>
</tbody>
</table>
</html>
http://jsfiddle.net/T6zhj/1/
Using display table-cell/row will do the job without any width needed.
The html :
<html>
<div>
<div class="row"><label>Name:</label><input type="text"></div>
<div class="row"><label>Email Address:</label><input type = "text"></div>
<div class="row"><label>Description of the input value:</label><input type="text"></div>
</div>
</html>
The Css :
label{
display: table-cell;
text-align: right;
}
input {
display: table-cell;
}
div.row{
display:table-row;
}
Set a width on the form element (which should exist in your example! ) and float (and clear) the input elements. Also, drop the br elements.
I know that this approach has been taken before, But I believe that using tables, the layout can be generated easily, Though this may not be the best practice.
JSFiddle
HTML
<table>
<tr><td>Name:</td><td><input type="text"/></td></tr>
<tr><td>Age:</td><td><input type="text"/></td></tr>
</table>
<!--You can add the fields as you want-->
CSS
td{
text-align:right;
}
in my case i always put these stuffs in a p tag like
<p>
name : < input type=text />
</p>
and so on and then applying the css like
p {
text-align:left;
}
p input {
float:right;
}
You need to specify the width of the p tag.because the input tags will float all the way right.
This css will also affect the submit button. You need to override the rule for this tag.
I have just given width to Label and input type were aligned automatically.
input[type="text"] {
width:100px;
height:30px;
border-radius:5px;
background-color: lightblue;
margin-left:2px;
position:relative;
}
label{
position:relative;
width:300px;
border:2px dotted black;
margin:20px;
padding:5px;
font-family:AR CENA;
font-size:20px;
}
<label>First Name:</label><input type="text" name="fname"><br>
<label>Last Name:</label><input type="text" name="lname"><br>
I'm trying to get the textboxes to float over the canvas in the appropriate spot.
If I use the id's to implement the css, it doesn't work. But If I specify the html element in the CSS instead, it works. (though, then I cannot manipulate the unique textboxes) (Demonstrated by the canvas tag)
Little Help?
<style type="text/css">
canvas { position:absolute;
z-index:-1;
top:0px;
left:100px;
}
.wrapper{ height:100%;
width:100%;
}
.username { position:absolute;
top:200px;
left:150px;
visibility:hidden;
z-index:1;
}
.password { position:absolute;
top:300px;
left:150px;
visibility:hidden;
z-index:2;
}
</style>
</head>
<body>
<div id="wrapper">
<canvas id = "gamescreen" height = "800" width = "800"></canvas>
<input type="text" name="username" id="username" />
<input type="password" name="password" id="password" />
</div>
</body>
The problem is that the . selector works on classes. If you want to select elements using their id you need to use # infront of the id. Example:
CSS
#example {
background: black;
}
HTML
<div id="example></div>
What you've implemented are CSS classes. Declare your div with class="wrapper" etc to apply those styles. You should also probably specify a finer-grained class for those particular styles, such as input.username, input.password and div.wrapper. Or if you want it done just for the specific element and aren't planning to reuse those styles anywhere else, change the . prefix to a # to match the id of the element rather than its class.