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/
Related
I'm a beginner in web development and I have made a Signup form for a webpage . What I feel like is trully missing from the form is a circular avatar icon on top of it like the picture below :
I have html and css code and I have loaded an avatar icon . However I do not know how to place it on the top middle of the form just like the image . I would appreciate your help and guidance with this task .
My code :
//the avatar appears inside the page not on top
.avatar{
height:500px;
border-radius:50%;
}
.form-area{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:500px;
height:600px;
box-sizing:border-box;
background:rgb(0,0,0,0.5);
padding:40px;
}
h1{
margin:0;
padding:0 0 20px;
font-weight:bold;
color:#ffffff;
}
.form-area p {
margin:0;
padding:0;
font-weight:bold;
color:#ffffff;
}
.form-area input,select{
margin-bottom:20px;
width:100%;
}
.form area input[type=text], .form-area input[type="password"]
{
border:none;
border-bottom:1px solid #ccc;
background-color:transparent;
outline:none;
height:40px;
color:#ffffff;
display:16px;
}
.form-area select{
margin-top:20px;
padding:10px 0;
}
.signupbtn{
border:none;
height:40px;
outline:none;
color:#ffffff;
font-size:15px;
background-color:#4CAF50;
cursor:pointer;
border-radius:20px;
}
.cancelbtn{
border:none;
height:40px;
outline:none;
color:#ffffff;
font-size:15px;
background-color:tomato;
cursor:pointer;
border-radius:20px;
}
button:hover{
opacity:0.7;
}
<div class="form-area">
<form action="Start_page.html" class = "sign-form animate" onsubmit="return validateform()" method = "post">
//the avatar I want to display on the form
<div class="imgcontainer">
<img src="IMAGES/login.jpg" alt="Avatar" class="avatar">
</div>
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="name" ><b><span>Name<span></b></label>
<input type="text" placeholder="Enter Name" name="onoma" id = "myname" required>
<label for="surname" ><b><span>Surname<span></b></label>
<input type="text" placeholder="Enter Surname" name="epith" id = "mysurname" required>
<label for="email" ><b><span>Email<span></b></label>
<input type="text" placeholder="Enter Email" name="email" id = "mailID" required>
<label for="psw"><b><span>Password</span></b></label>
<input type="password" placeholder="Enter Password" name="psw" id = "pass" required>
<p>By creating an account you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="button" class="cancelbtn" onclick = "window.location.href='Start_page.html'">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</div>
Thank you in advance . If you have any questions or need more information about my page tell me and I will update the post.
Add this to the image:
.imgcontainer img{
height: 100px; /* set a default height*/
margin-top: -75px; /* move image up fo 75px */
border: 1px solid black; /* define a border */
border-radius: 50%; /* make the image rounded, this works only with square images*/
}
and this to it's container:
.imgcontainer{
display: flex; /* change display */
justify-content:center;/* align to the center the image */
/* NOTE : there is a lot of other way to align the image to the center, you can use the one that you prefer*/
}
If this method does not do what you want in the way you want, another way is to use position: absolute, center it on center top, and than traslate it -50% top and -50% left
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'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>
I have made a check box which is used to select various items available to choose from
When any of the check boxes is clicked, the first one get checked leaving the clicked one unchecked.
CSS
.checkbox {
overflow: hidden;
clip: rect(0 0 0 0);
height:1px;
width:1px;
padding:0;
border:0;
position:absolute;
}
.checkbox + label.label {
padding-left:20px;
height:15px;
display:inline-block;
margin-top:3px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:11px;
vertical-align:middle;
cursor:pointer;
float:right;
}
.checkbox:checked + label.label {
background-position: 0 -15px;
}
.label{
background-image:url(images/dark-check-green.png);
color:white;
font-size:11px;
font-weight:100;
}
HTML
<input id="tick" class="checkbox" type="checkbox" />
<label for="tick" name="tick_box" class="label"></label>
Using the same for="" attribute for all the labels will result in unwanted and weird behaviour. You should make sure its different for each label + checkbox.
Example:
<input id="tick1" class="checkbox" type="checkbox" />
<label for="tick1" name="tick_box" class="label"></label>
<input id="tick2" class="checkbox" type="checkbox" />
<label for="tick2" name="tick_box" class="label"></label>
<input id="tick3" class="checkbox" type="checkbox" />
<label for="tick3" name="tick_box" class="label"></label>
I can't seem to get my head around the following problem. So I procured a template of a search form which I then changed to fit my design requirements but I can't seem to be able to change the value=s bit to an image of a search box button. Please see http://jsfiddle.net/p9URB/. The code is as follows:
HTML
<form action="/search" method="get" id="search_form" class="clearfix voicetron" data-ds-protection="enabled">
<div id="search_holder">
<input type="text" id="search_field" name="q" value="" title="Enter search term" placeholder="Search" data-validators="required" data-speech-enabled="" data-search-engine="oracle" x-webkit-speech="x-webkit-speech" autocomplete="off">
<input type="text" id="search_suggest" value="" placeholder="" disabled="">
<input type="submit" value="y" data-submit-text="s" class="btn_search iconify" title="Search">
</div>
</form>
CSS
#search_form{
position:relative;
margin:10px 0;
float:right
}
#search_form #search_holder{
display:block
}
#search_form #search_holder input[type="text"]{
font-size:13px;
width:180px;
height:26px;
margin:0;
position:absolute;
right:0;
padding:0 32px 0 6px
}
#search_form #search_holder #search_field{
z-index:3;
border:1px solid #C9C9C9;
background:url("") #fff;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
text-shadow:0 0 1px #fff
}
#search_form #search_holder #search_field:focus,#search_form #search_holder #search_field:hover{
border-color:#acb1b4;
color:#123
}
#search_form #search_holder #search_field:-moz-placeholder{
color:#a6a7a8
}
#search_form #search_holder #search_field::-webkit-input-placeholder{
color:#a6a7a8
}
#search_form #search_holder #search_field:-moz-placeholder{
color:#a6a7a8
}
#search_form #search_holder #search_suggest{
z-index:2;
border:none;
background:#fff;
border:1px solid #fff;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
color:#9da2a8
}
#search_form #search_holder .overTxtLabel{
z-index:113
}
#search_form .active{
color:#fff;
background:#a6a7a8
}
#search_form .btn_search{
z-index:3;
position:absolute;
top:4px;
right:1px;
display:block;
color:#a6a7a8;
width:28px;
height:21px;
font-size:17px;
line-height:21px;
text-align:center;
font-weight:400;
background:0 0;
border:0;
border-left:1px dotted #a6a7a8
}
#search_form .btn-anchor{
background:0 0;
border:0;
border-bottom:1px solid #ccc;
color:#666;
margin:0 10px;
font-size:10px;
padding-bottom:2px;
font-weight:400
}
#search_form.voicetron [name="q"]{
padding-right:34px;
width:170px;
line-height:17px
}
#search_form.voicetron .btn_search{
color:#71767a
}
You can use an input type of image as your submit button:
<input type="image" src="/my/image/location.png" />
Instead of styling up a submit button. As far as I know, the input type of image replicates the submit behaviour of a submit button.
Add this to btn_search iconify class of css and specify an image.
background: url("your_url.png") no-repeat scroll 0 0 transparent;
You have set input value="s" so change it to value="" and add background image for that button
#search_form.voicetron .btn_search{
color:#71767a;
background-image:url('http://findicons.com/files/icons/1389/g5_system/16/toolbar_find.png');
background-repeat:no-repeat;
}
Js Fiddle
You can simply treat the button as a block element and remove the text with
text-indent:-9999px;
then set a background image.
You probably also want to add
cursor:pointer;
As it doesn't look like a button at the moment.