I am trying to get a form styled with css on my webpage, but i cant seem to get the form to recognize the css.As you can see below I am simply trying to stlye the element below is the code. Any thoughts? I am sure the solution is cake, new programmer over here.. any and all help is appreciated!
CSS
form {
background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
margin: auto;
position: relative;
width: 550px;
height: 450px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
color: #09C;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 10px;
border: 1px solid #999;
border: inset 1px solid #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
input {
width: 375px;
display: block;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
textarea#feedback {
width: 375px;
height: 150px;
}
textarea.message {
display: block;
}
input.button {
width: 100px;
position: absolute;
right: 20px;
bottom: 20px;
background: #09C;
color: #fff;
font-family: Tahoma, Geneva, sans-serif;
height: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999;
}
input.button:hover {
background: #fff;
color: #09C;
}
textarea:focus, input:focus {
border: 1px solid #09C;
}
HTML
<form>
<div>
<h1>Contact Form :</h1>
<label>
<span>Your name</span><input id="name" type="text" name="name" />
</label>
<label>
<span>Email Address</span><input id="email" type="text" name="email" />
</label>
<label>
<span>Subject</span><input id="subject" type="text" name="subject" />
</label>
<label>
<span>Message</span><textarea id="feedback" name="feedback"></textarea>
<input type="button" value="Submit Form" />
</label>
</div>
</form>
Related
I am new to this, so as practice I tried to create a replica of the Netflix registration page.
I am using the flex box model on the webpage.
I am struggling to get the email input and the get started button to align. I have tried changing the button tag to an anchor tag and go the same result. I have tried using margin and padding on the individual elements and that didn't work.
.landing_page_block {
display: block;
width: 40%;
margin-top: 220px;
text-align: center;
}
.landing_page_h1 {
font-size: 65px;
font-weight: 700;
letter-spacing: 1.2px;
text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8);
-webkit-text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8);
}
.landing_page_phrase {
margin: 20px 0 30px 0;
font-weight: 300;
letter-spacing: 1.2px;
text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8);
-webkit-text-shadow: 5px 5px 15px 5px rgba(0,0,0,0.8);
}
.lp_box1 h5 {
letter-spacing: 1.1px;
font-weight: 300;
margin-bottom: 20px;
}
.lp-box2 {
height: 70px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.lp_box2 input {
width: 60%;
height: 70px;
border: none;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
font-weight: 300;
padding-left: 15px;
-webkit-box-shadow: 0px 0px 24px 0px rgba(255,255,255,0.81) inset;
-moz-box-shadow: 0px 0px 24px 0px rgba(255,255,255,0.81) inset;
box-shadow: 0px 0px 24px 0px rgba(255,255,255,0.81) inset;
}
.get_started_btn {
height: 70px;
margin-left: -3px;
width: 39%;
font-size: 30px;
border: none;
border-left: 2px solid grey;
font-weight: 300;
color: white;
background-color: red;
text-decoration: none;
}
<div class="landing_page">
<div class="landing_page_block">
<div class="lp_box1">
<h1 class="landing_page_h1">Unlimited films, TV programmes and more.</h1>
<h3 class="landing_page_phrase">Watch anywhere. Cancel at any time.</h3>
<h6>Ready to watch? Enter your email to create or restart your membership.</h6>
</div>
<div class="lp_box2">
<input type="email" name="email" placeholder="Email address"/>
<button class="get_started_btn">Get Started </button>
</div>
</div>
</div>
The result of my code
I hope that's how you wanted your alignment to be
.landing_page_block {
margin-top: 220px;
text-align: center;
}
.landing_page_h1 {
font-size: 65px;
font-weight: 700;
letter-spacing: 1.2px;
text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
-webkit-text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
}
.landing_page_phrase {
font-weight: 300;
letter-spacing: 1.2px;
text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
-webkit-text-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
}
.lp_box1 h5 {
letter-spacing: 1.1px;
font-weight: 300;
margin-bottom: 20px;
}
.lp_box2 {
display: flex;
align-items: center;
justify-content: space-around;
}
.lp_box2>.input-div{
height: 70px;
width: 62%;
}
.lp_box2>.input-div>input {
height: 70px;
width: 100%;
border: none;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
font-weight: 300;
padding-left: 15px;
-webkit-box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.81) inset;
-moz-box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.81) inset;
box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.81) inset;
}
.get_started_btn {
height: 70px;
width: 30%;
font-size: 30px;
border: none;
border-left: 2px solid grey;
font-weight: 300;
color: white;
background-color: red;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
<div class="landing_page">
<div class="landing_page_block">
<div class="lp_box1">
<h1 class="landing_page_h1">Unlimited films, TV programmes and more.</h1>
<h3 class="landing_page_phrase">Watch anywhere. Cancel at any time.</h3>
<h6>Ready to watch? Enter your email to create or restart your membership.</h6>
</div>
<div class="lp_box2">
<div class="input-div">
<input type="email" name="email" placeholder="Email address" />
</div>
<div class="get_started_btn">Get Started </div>
</div>
</div>
</div>
I'm having difficulty with the following code - everything works as I wish it EXCEPT the contents of the check boxes. The ticks and crosses are too low.
Can someone tell me what I am doing wrong here please? I admit I hacked this code from several sources and glued it together, so I'm more than happy to admit I have misunderstood something or other.
Thanks!
.checkbox {
display: inline-block;
float: left;
width: 25%;
font-size: 16px;
line-height: 36px;
text-align: left;
}
input[type=checkbox] {
display: none;
}
.checkbox:before {
display: inline-block;
width: 18px;
height: 18px;
content: "\2715\0020";
background-color: #f3f3f3;
color: #000000;
text-align: center;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
border-radius: 3px;
margin: 0px 10px 0px 0px;
vertical-align: middle;
}
input[type=checkbox]:checked+.checkbox:before {
color: #f3f3f3;
background-color: #abcdef;
content: "\2714\0020";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
}
<section>
<form>
<input id="option1" type="checkbox">
<label class="checkbox" for="option1">Unchecked</label>
<input id="option2" type="checkbox" checked>
<label class="checkbox" for="option2">Checked, changeable</label>
<input id="option3" type="checkbox" checked disabled>
<label class="checkbox" for="option3">Checked, fixed</label>
<input id="option4" type="checkbox" checked disabled>
<label class="checkbox" for="option4">Checked, fixed</label>
<input id="option5" type="checkbox">
<label class="checkbox" for="option5">Unchecked</label>
</form>
</section>
Add line-height to .checkbox:before{...} set it to 20px, or play this number,
.checkbox:before {
display: inline-block;
width: 18px;
height: 18px;
content: "\2715\0020";
background-color: #f3f3f3;
color: #000000;
text-align: center;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
border-radius: 3px;
margin: 0px 10px 0px 0px;
vertical-align: middle;
line-height: 20px;
}
Add line-height: 1.2; to your .checkbox:before:
.checkbox:before {
display: inline-block;
width: 18px;
height: 18px;
content: "\2715\0020";
background-color: #f3f3f3;
color: #000000;
text-align: center;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
border-radius: 3px;
margin: 0px 10px 0px 0px;
vertical-align: middle;
line-height: 1.2; /* add this*/
}
.checkbox {
display: inline-block;
float: left;
width: 25%;
font-size: 16px;
line-height: 36px;
text-align: left;
}
input[type=checkbox] {
display: none;
}
.checkbox:before {
display: inline;
padding:2px;
width: 18px;
height: 18px;
content: "\2715\0020";
background-color: #f3f3f3;
color: #000000;
text-align: center;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
border-radius: 3px;
margin: 0px 10px 0px 0px;
vertical-align: middle;
}
input[type=checkbox]:checked+.checkbox:before {
color: #f3f3f3;
background-color: #abcdef;
content: "\2714\0020";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
}
<section>
<form>
<input id="option1" type="checkbox">
<label class="checkbox" for="option1">Unchecked</label>
<input id="option2" type="checkbox" checked>
<label class="checkbox" for="option2">Checked, changeable</label>
<input id="option3" type="checkbox" checked disabled>
<label class="checkbox" for="option3">Checked, fixed</label>
<input id="option4" type="checkbox" checked disabled>
<label class="checkbox" for="option4">Checked, fixed</label>
<input id="option5" type="checkbox">
<label class="checkbox" for="option5">Unchecked</label>
</form>
</section>
Please take a look at the following CodePen. There you can see my custom range input. I want the tick positions of the slider to be shown and for that I added the datalist:
fieldset {
border: 2px solid #48530D;
padding-top: 27px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 4px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
cursor: pointer;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
background: #a4b162;
border-radius: 0px;
border: 1px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 1px solid #000000;
height: 16px;
width: 16px;
border-radius: 0px;
background: #48530d;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #a6b365;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8px;
cursor: pointer;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
background: #a4b162;
border-radius: 0px;
border: 1px solid rgba(0, 0, 0, 0);
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 1px solid #000000;
height: 16px;
width: 16px;
border-radius: 0px;
background: #48530d;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 8px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #a2af5f;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 0px;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-fill-upper {
background: #a4b162;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 0px;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 1px solid #000000;
height: 16px;
width: 16px;
border-radius: 0px;
background: #48530d;
cursor: pointer;
height: 8px;
}
input[type=range]:focus::-ms-fill-lower {
background: #a4b162;
}
input[type=range]:focus::-ms-fill-upper {
background: #a6b365;
}
<fieldset>
<form>
<input max="6" min="1" step="1" name="question_three" type="range" list="question_three_list" />
<datalist id="question_three_list">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</datalist>
</form>
</fieldset>
But unfortunately nothing is showing up. What I wanted to achieve is the
following (ugly example created in MS Paint, but I guess you will get what I mean):
So how can I achieve that?
I know my answer is way way late, but I keep coming back here when I try to find doing the same thing. I did manage to display tickmarks using the following settings.
The code results in the following:
* {
box-sizing: border-box;
}
.slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 25px;
background: #D3D3D3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #FF0000;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #FF0000;
cursor: pointer;
}
.sliderticks {
display: flex;
justify-content: space-between;
padding: 0 10px;
}
.sliderticks p {
position: relative;
display: flex;
justify-content: center;
text-align: center;
width: 1px;
background: #D3D3D3;
height: 10px;
line-height: 40px;
margin: 0 0 20px 0;
}
<div class="range">
<input type="range" min="0" max="5" value="2" class="slider">
<div class="sliderticks">
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</div>
-webkit-appearance: none;
The above removes platform-native styling (Chrome / Safari), which removes the ticks.
You can get more information here, but unfortunately, styling support for input ranges (particularly ticks) is still pretty terrible.
document.querySelectorAll(".__range-step").forEach(function(ctrl) {
var el = ctrl.querySelector('input');
var output = ctrl.querySelector('output');
var newPoint, newPlace, offset;
el.oninput =function(){
// colorize step options
ctrl.querySelectorAll("option").forEach(function(opt) {
if(opt.value<=el.valueAsNumber)
opt.style.backgroundColor = '#48530d';
else
opt.style.backgroundColor = '#a4b162';
});
};
el.oninput();
});
.__range input
{
outline: none;
-webkit-appearance: none;
background-color: #aaa;
height: 3px;
width: 100%;
margin: 10px auto;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
cursor: pointer;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
background: #a4b162;
border-radius: 0px;
border: 1px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 1px solid #000000;
height: 16px;
width: 16px;
border-radius: 0px;
background: #48530d;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5px;
}
.__range-step{
position: relative;
}
.__range-max{
float: right;
}
.__range-step datalist {
position:relative;
display: flex;
justify-content: space-between;
height: auto;
bottom: 16px;
/* disable text selection */
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
/* disable click events */
pointer-events:none;
}
.__range-step datalist option {
width: 10px;
height: 10px;
min-height: 10px;
padding:0;
line-height: 40px;
}
.__range{
margin:10px 40px;
}
<div class="__range">
<input value="4" type="range" max="6" min="1" step="1" list="ticks1">
</div>
<div class="__range __range-step">
<input value="4" type="range" max="6" min="1" step="1" list="ticks1">
<datalist id="ticks1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</datalist>
</div>
I having problems trying to get a log and a search box to go side by side. The logo on the left and the search box on the right.
header {
background:#383838;
height: 130px;
border-top:10px solid #2C2C2C; border-bottom:1px solid #2C2C2C;
}
.wrap-header {
width:960px;
position:relative;
margin: 0px auto;
}
header #logo {
position:absolute;
top:40px;
left: 30px;
width: 100%;
}
header #search,
header #submit {
position: absolute;
top: 60px;
right: 20px;
width: 258px;
z-index: 15;
}
header #search {
padding: 5px 9px;
height: 20px;
width: 300px;
border: 1px solid #a4c3ca;
background: #f1f1f1;
border-radius: 50px 3px 3px 50px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
header #submit
{
background-color: #6cbb6b;
background-image: linear-gradient(#95d788, #6cbb6b);
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #7eba7c #578e57 #447d43;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3),
0 1px 0 rgba(255, 255, 255, 0.3) inset;
height: 35px;
margin: 0 0 0 10px;
padding: 0;
width: 90px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
header #submit:hover {
background-color: #95d788;
background-image: linear-gradient(#6cbb6b, #95d788);
}
header #submit:active {
background: #95d788;
outline: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
header #submit::-moz-focus-inner {
border: 0; /* Small centering fix for Firefox */
}
header #search::-webkit-input-placeholder {
color: #9c9c9c;
font-style: italic;
}
<header>
<div class="wrap-header">
<div id="logo"><img src="./images/logo.png"/></div>
<form id="searchbox" action="search.php" method="post">
<input id="search" type="text" placeholder="Type here" name="search">
<input name="submit" type="submit" id="submit" formmethod="POST" value="Search">
</form>
</div>
</header>
What is happening is the logo is okay but the submit button for the search-box is inside the text-box for the search.
Just edit following css header #search class
header #search {
padding: 5px 9px;
height: 20px;
margin-right: 90px;
width: 300px;
border: 1px solid #a4c3ca;
background: #f1f1f1;
border-radius: 50px 3px 3px 50px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
It will do the job well.. Here is the preview
Edit
You need toadd min-width to your header element
Here's working jsfiddle http://jsfiddle.net/otbay822/
<header>
<div class="wrap-header">
<div id="logo" class="inline-div">
<img src="./images/logo.png"/>
</div>
<div class="inline-div">
<form id="searchbox" action="search.php" method="post">
<input id="search" type="text" placeholder="Type here" name="search">
<input name="submit" type="submit" id="submit" formmethod="POST" value="Search">
</form>
</div>
</div>
</header>
CSS:
.inline-div{
display:inline-block;
}
I Wrapped the Form in a div and applied a class too both the form and the logo div. And then simply applied display:inline-block;
Hope it Helps.
I want to create a page like in image
Problem:
Main box Shadow not coming as in image.
I have tried with my own HTMl and CSS code.
Here is fiddle
http://jsfiddle.net/EE6hU/
HTML
<div class='wrapper' id='id_wrapper'>
<div class='main'> <span class='online_survey'>Online Survey</span>
<div class='login_box'>
<div class='login'>
<form>
<div class='label'>username</div>
<input type='text' name='username' class='loginInput' placeholder='moderator' />
<div style='clear:both'></div>
<div class='label'>password</div>
<input type='password' name='password' class='loginInput' placeholder='*********' />
<div style="clear:both"></div>
<input type='checkbox' name='remember' class='check' />
<div class='remember'>Remember me</div>
<input type='submit' name='submit' class='submit_button' value='submit' />
</form>
</div>
<div class='forget_pass'><a href='#'>Forget Password</a>
</div>
</div>
</div>
</div>
CSS
.wrapper {
background:#313131;
height:645px;
}
.main {
margin: 0 auto;
position: relative;
top: 20%;
width: 500px;
}
.online_survey {
bottom: 10px;
color: #FFFFFF;
font-size: 20px;
margin-left: 15px;
position: relative;
}
.user_name {
}
.login_box {
background: none repeat scroll 0 0 #7D7D7D;
border: 1px solid #98B2C9;
border-radius: 20px;
padding: 8px;
box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
}
.loginInput {
background:#313131;
border-radius: 5px;
float: left;
height: 30px;
width: 200px;
margin: 5px;
padding:5px;
color:#ffffff;
}
.label {
float: left;
height: 30px;
width: 140px;
}
.login {
padding: 30px;
}
.forget_pass a {
color: white;
text-decoration:none;
}
.submit_button {
}
.check {
float: left;
margin-left: 140px;
margin-right: 5px;
}
ge.
Stacking shadows of various sizes might get you close.
http://jsfiddle.net/isherwood/EE6hU/1
.login_box {
box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75),
0 0 150px rgba(255,255,255,0.5),
0 0 250px rgba(255,255,255,0.5);
}
I may have to eat my own words. Here's a way to get the narrower white shadow in your image:
http://jsfiddle.net/isherwood/EE6hU/4
.login_box {
...
box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
margin: 0 -150px;
}
.login_box_shadow {
overflow: visible;
border-radius: 20px;
box-shadow: 0 0 150px rgba(255, 255, 255, 0.5),
0 0 250px rgba(255, 255, 255, 0.5);
margin: 0 150px;
}