I'm trying to set a width limit on a input label and at the same time align a styled check to the right.
The below image shows how it currently looks and how I'd like it to look:
This is the HTML I'm using:
<a href='#' class='tooltip' title='tooltip text.'><img src='images/tooltip.png'></a> <b>This is my Text Label:</b></div>
<label class="switch"><input type="checkbox" name='check' id='check' title='checkbox' value="1"><div class="slider"></div></label>
<br/><input type="text" id="textinput" name="textinput" size="40" maxlength="40" autocomplete="off" placeholder="enter text here" value="" tabindex='1' disabled/></div><br/>
I've created a fiddle showing it here:
https://jsfiddle.net/bywgqnrg/1/
Can anyone advise the best way to do this ?
Thanks
Here's a possible solution, I added a fieldwrap to wrap the whole content and sets a fixed width and floated the switch to right check the code below:
.switch { position:relative; display:inline-block; width:53px; height:19px }
.switch input { display:none }
.slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#ccc; -webkit-transition:.4s; transition:.4s }
.slider:before { position:absolute; content:""; height:11px; width:19px; left:4px; bottom:4px; background-color:#fff; -webkit-transition:.4s; transition:.4s }
input:checked+.slider { background-color:#008c00 } input:focus+.slider { box-shadow:0 0 1px #2196F3 }
input:checked+.slider:before { -webkit-transform:translateX(26px); -ms-transform:translateX(26px); transform:translateX(26px) }
input, select, textarea {border: 1px solid #A0A0A0; background: #FFF; padding: 3px 4px; color: #222; margin: 2px 5px 2px 0px; }
input:focus, select:focus, textarea:focus { outline: none;}
.fieldwrap { width : 320px; overflow : hidden; }
.fieldwrap .switch {float : right;}
<div class="fieldwrap">
<a href='#' class='tooltip' title='tooltip text.'><img src='images/tooltip.png'></a> <b>This is my Text Label:</b>
<label class="switch"><input type="checkbox" name='check' id='check' title='checkbox' value="1"><div class="slider"></div></label>
<div><input type="text" id="textinput" name="textinput" size="40" maxlength="40" autocomplete="off" placeholder="enter text here" value="" tabindex='1' disabled/></div>
</div>
Related
UPDATE: I solved the problem by making inputs visible for browser but not for user. Making those changes to CSS worked.
.radio-checked {
opacity:0;
position: absolute;
z-index: -1;
}
QUESTION:
I have custom inputs in my form. I hide them with...
display:none;
...then styling with css to look different.
Example of my codes:
<input id="radio-input" class="radio-check" type="radio" name="odeme">
<label for="radio-input" class="radio-label">Option Name</label>
Here is a fiddle for showing how it works.
https://jsfiddle.net/kjaL1zbd/
Problem is, when you hide the input element the validation message is won't show up. You can see example here:
https://jsfiddle.net/kjaL1zbd/1/
So is there any way to show this message on the label? Or is there any solution for this?
/* RADIO CUSTOM */
form {
position: relative;
display: block;
}
.radio-check {
//visibility:collapse;
margin-left: 22px;
}
.test {
margin-left: 110px;
}
.radio-label {
position:absolute;
padding-left:20px;
//margin:10px 40px 10px 0px;
cursor:pointer;
left:20px;
}
.radio-label:before {
content:"";
display:block;
width:15px;
height:15px;
background-color:#fff;
border:1px solid #ddd;
border-radius:100px;
top:0;
left:0px;
position:absolute;
-webkit-transition:all .2s ease;
transition:all .2s ease;
}
.radio-label:hover:before{
border:1px solid #4198d3;
}
input[type="radio"]:checked + .radio-label:after {
content:"";
width:11px;
height:11px;
display:block;
position:absolute;
top:3.3px;
left:3.3px;
background-color:#4498ff;
background-repeat:no-repeat;
background-position:center;
background-size:11px;
border-radius:100px;
}
form{
margin:50px 0;
}
<form>
<input id="ben" class="radio-check" type="radio" name="odeme" required>
<label for="ben" class="radio-label">Option Name</label>
<input type="submit" class="test">
</form>
Click submit button to see the problem. Top is custom, bottom is default.
<form>
<input id="ben" type="radio" name="odeme" required>
<label for="ben" >Option Name</label>
<input type="submit">
</form>
I have a simple form that allows users to send mails to the site's owner. I wouldn't like to change it totally, because I've got already written PHP script for this, and this solution worked fine before I tried to add some styles to it...
The problem is, "Wyślij >" (submit) inside the textarea does not work ONLY in firefox. I can't click it, like the button is somewhere underneath. In Opera, Chrome, Edge, IE - it works just fine. I'm starting to giving up on this. I would appreciate any help, I don't know what's causing this.
JSFiddle: http://jsfiddle.net/c0vz64m1/
HTML code:
<form method="post" action="kontakt.php" id="contactform" style="margin-left:35vw; margin-top:20px;">
<label for="name">Imię<font color="white">*</font>:</label><br>
<input type="text" name="name" id="name" placeholder=" Twoje imię (wymagane)" required /><br>
<label for="email">Email<font color="white">*</font>:</label><br>
<input type="text" name="email" id="email" placeholder=" Twój email (wymagane)" required />
<div id="text-area">
<label for="message">Wiadomość<font color="white">*</font>:</label><br>
<textarea name="message" rows="9" cols="50" id="message" placeholder=" Twoja wiadomość (wymagane)" equired></textarea>
<input type="submit" name="submit" value="Wyślij »" class="submit-button"/></div>
</form>
CSS:
input#name,input#email {
box-shadow:0px 0px 10px skyblue;
border:2px solid skyblue;
border-radius:7px;
padding-left:5px;
transition:all .2s ease-in-out;
}
input#name:focus,input#email:focus {
box-shadow:0px 0px 20px skyblue;
transition:all .2s ease-in-out;
}
input#name:hover,input#email:hover {
box-shadow:0px 0px 20px skyblue;
}
.submit-button {
width:75px;
height:36px;
margin-left:380px;
display:block;
margin-top:-41px;
border-top:2px solid blue;
z-index:5000;
font-size:14pt;
color:skyblue;
font-family:Andada;
}
textarea {
box-shadow:0px 0px 10px skyblue;
border:2px solid skyblue;
border-radius:10px;
resize:none;
height:150px;
width:375px;
z-index:1;
padding-right:75px;
transition:all .2s ease-in-out;
}
textarea:focus {
box-shadow:0px 0px 20px skyblue;
transition:all .2s ease-in-out;
}
textarea:hover {
box-shadow:0px 0px 20px skyblue;
}
Use absolute positioning to put the button over the textarea and it will work.
Remove from class .submit-button these things:
margin-left:380px;
margin-top:-41px;
and add these:
position:absolute;
right: 0;
bottom: 30px;
Then add position:relative to #text-area .
Please see updated fiddle: http://jsfiddle.net/w86o8hhh/ which adds:
z-index:10;
to the CSS, and:
id="submit"
to the submit button
How can I use a div as radio button ?
I mean that :
you can select a div and then it is bordered blue
you can only select one of them
If you want a CSS Only solution, this is an excellent one :
.labl {
display : block;
width: 400px;
}
.labl > input{ /* HIDE RADIO */
visibility: hidden; /* Makes input not-clickable */
position: absolute; /* Remove input from document flow */
}
.labl > input + div{ /* DIV STYLES */
cursor:pointer;
border:2px solid transparent;
}
.labl > input:checked + div{ /* (RADIO CHECKED) DIV STYLES */
background-color: #ffd6bb;
border: 1px solid #ff6600;
}
<label class="labl">
<input type="radio" name="radioname" value="one_value" checked="checked"/>
<div>Small</div>
</label>
<label class="labl">
<input type="radio" name="radioname" value="another" />
<div>Small</div>
</label>
Inspired by this answer
Yes, you can use 'div' as radio button and will work as radio button groups. But for this you'll need Javascript. I've created a script for that using JQuery. Here is the source--
$('.radio-group .radio').click(function(){
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
var val = $(this).attr('data-value');
//alert(val);
$(this).parent().find('input').val(val);
});
.radio-group{
position: relative;
}
.radio{
display:inline-block;
width:15px;
height: 15px;
border-radius: 100%;
background-color:lightblue;
border: 2px solid lightblue;
cursor:pointer;
margin: 2px 0;
}
.radio.selected{
border-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Select an option (You will get it's value displayed in the text input field!)</h2>
<form method="post" action="send.php">
<div class="radio-group">
<div class='radio' data-value="One"></div>1
<div class='radio' data-value="Two"></div>2
<div class='radio' data-value="Three"></div>3
<br/>
<input type="text" id="radio-value" name="radio-value" />
</div>
</form>
This is a simple solution.
HTML
<div class="option first">1</div>
<div class="option second">2</div>
<div class="option third">3</div>
<div class="option fourth">4</div>
CSS
.option
{
background-color:red;
margin: 10px auto;
}
.option.active
{
border:1px solid blue;
}
Jquery
$(document).ready(
function()
{
$(".option").click(
function(event)
{
$(this).addClass("active").siblings().removeClass("active");
}
);
});
link
Basically I created a couple radio buttons, then hid the actual buttons, and made the labels the buttons. For some reason they won't display inline and I can't quite seem to figure out why. Does anyone know what I'm doing wrong?
.ReviewBox {
width:64%;
height:600px;
position:relative;
left:18%;
background-color:#4795d7;
margin-bottom:10px;
box-shadow:0px 2px 4px black;
border-radius:4px;
}
.ReviewBox input {
visibility:hidden;
width:0;
display:inline;
}
.ReviewBox label:hover {
color:#00aedb;
}
.ReviewBox input:checked + label {
color:#0900ff;
}
.ReviewBox p {
position:absolute;
left:12%;
color:white;
}
.ReviewBox label {
position:relative;
left:45%;
color:white;
display:inline;
}
.ReviewHeader {
position:relative;
left:7%;
top:32px;
font-size:26px;
text-shadow:0px 1px 1px black;
font-family:Lobster;
color:white;
}
.Server {
top:75px;
font-size:15px;
}
.Names label{
top:27px;
font-size:15px;
}
<div class="ReviewBox">
<h2 class="ReviewHeader">Let Us Know How We Did</h2>
<div>
<p class="Server">Server</p>
<div class="Names">
<input type="radio" name="Names" value="Juan" id="Juan">
<label for="Juan">Juan</label>
</div>
<div class="Names">
<input type="radio" name="Names" value="Sebastian" id="Sebastian">
<label for="Sebastian">Sebastian</label>
</div>
</div>
Heres a JSFiddle of what I have: http://jsfiddle.net/u6u53916/1/
<div class="names">
<input type="radio" name="Names" value="Juan" id="Juan"/>
<label for="Juan">Juan</label>
<input type="radio" name="Names" value="Pablo" id="Pablo"/>
<label for="Pablo">Pablo</label>
</div>
Just remove the middle <div class="names"> so that it is a single div enclosing the radio buttons.
just add display: inline; to your Names class. it's your code + what you're looking for:
http://jsfiddle.net/Igor_Ivancha/kywno6q0/
I am having an issue with aligning my password input box so its aligned with the email address input box any ideas?
**CSS:**
.column-right-login{
background:url('../image/login.png') no-repeat;
width:335px;
height:154px;
padding: 30px 0px 0px 10px; /* top right bottom left */
}
.column-right-login input{
margin-left:15px;
}
.column-right-login a{
color:#fff;
}
HTML:
<div class="column-right-login">
<form action="http://www.thetradinghouse.co.nz/login" method="post" enctype="multipart/form-data" id="homeLogin">
<div><label for="email">Email Address: </label> <input type="text" name="email" value="" /></div>
<div><label for="password">Password: </label> <input type="password" name="password" value="" /></div>
Forgotten Password
<a onclick="$('#homeLogin').submit();" class="button"><span>Login</span></a>
</form>
<script type="text/javascript"><!--
$('#homeLogin input').keydown(function(e) {
if (e.keyCode == 13) {
$('#homeLogin').submit();
}
});
//--></script>
</div>
This is just one idea:
.column-right-login label{
width:150px;
display:-moz-inline-stack; /*Firefox 2 hack: must come before other declarations*/
display:inline-block;
_height:50px; /*IE 6 Hack*/
/*IE 7 Hacks*/
zoom:1;
*display:inline;
}
sample: http://jsfiddle.net/aTuFq/2/
Resources: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
This works, but I suggest you go read this article:
http://www.alistapart.com/articles/prettyaccessibleforms
.column-right-login{
background:url('../image/login.png') no-repeat;
width:335px;
height:154px;
padding: 30px 0px 0px 10px; /* top right bottom left */
}
form label {
float:left;
width:100px
}
.column-right-login input {
margin-left:15px;
float:left;
}
form div {
clear:both;
}
.column-right-login a {
color:#fff;
}