So I want my submit button to be a different width than my other input fields. I am trying to do this but the submit button still has the same width. Please Help!
Here is my CSS:
#logon {
position: absolute;
margin-left: 60%;
top: 10px;
}
#logon input {
display: inline;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
}
#logon input.button {
display: inline;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 50px;
padding: 6px 15px 6px 35px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
}
And my HTML:
<div id="logon"><form action="login_r.php" method="POST"> <input name="myusername" type="text" size="40" placeholder="Username..." /> <input name="mypassword" type="password" size="40" placeholder="Password..." /><input type="button" value="Log In"></form></div>
The correct attribute selector is:
#logon input[type='button']
However, if you're submitting a form, it should be <input type="submit" />, in which case you want
#logon input[type='submit']
The .button selector is for the class "button". Your <input> element doesn't have a class on it. You can try this:
input[type=button] { whatever }
Personally I like <button type=submit> better than <input type=submit> because it's a lot more flexible in terms of content (things like little icons etc).
Related
Strange stutter/choppy transition on box-shadow using Chrome browser. Haven't noticed this before. Firefox, IE, Opera execute transition as expected. Any one have the same experience and possibly a solution?
html {
text-align: center;
font: 13px Open Sans;
color: #5c5c5c
}
a,
input,
button {
display:inline-block;
margin: 30px auto 0;
border: 4px solid #dedede;
background: #f3f3f3;
padding: 10px 25px;
text-decoration: none;
color: inherit;
line-height:1;
-webkit-transition: box-shadow .5s cubic-bezier(0.22, 0.61, 0.36, 1);
-moz-transition: box-shadow .5s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: box-shadow .5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
a:hover,
input:hover,
button:hover {
-webkit-box-shadow: 0px 5px 4px -3px rgba(0, 0, 0, 0.70);
-moz-box-shadow: 0px 5px 4px -3px rgba(0, 0, 0, 0.70);
box-shadow: 0px 5px 4px -3px rgba(0, 0, 0, 0.70);
}
<h1>I AM AN INPUT</h1>
<p>For some reason unknown to myself, a box-shadow transition<br>on HOVER, executes choppy (stutters). Only experiencing in Chrome so far.</p>
<input type="submit" value="Input">
Fine on Link
<button name="button">
Fine on Button
</button>
What piece of code "deleted" the hint about required field?
https://jsfiddle.net/venntr/qegxnjm2/
<div class="switch-field">
<input type="radio" id="onlinetak" name="online" required/>
<label for="onlinetak">Online</label>
<input type="radio" id="onlinenie" name="online" required />
<label for="onlinenie">Offline</label>
</div>
The first thing to fix is that it is not in a form tag, as was pointed out by Leon.
What's happening is that your CSS is styling your HTML labels, not your radio inputs, to be selected. You set the inputs to be display: none, so the associated errors with there being no input do not display. You need to show the inputs and edit the styling of the inputs themselves so that the error properly appears if there is no input.
EDIT: Here's an example of your code that will work with what I said.
body {
background-color: #F7FCFF;
}
.QA radio {
-webkit-appearance: none;
background-color: #e1e1e1;
border: 4px solid #e1e1e1;
border-radius: 10px;
width: 100%;
display: inline-block;
position: relative;
width: 20px;
height: 20px;
}
.QA radio:checked {
background: grey;
border: 4px solid #e1e1e1;
}
input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
.QA {
font: normal normal 14px/1 Helvetica;
margin: 1px;
border-radius:10px;
text-align:center;
}
.QA1 {
font: normal normal 14px/1 Helvetica;
border-radius:10px;
text-align:left;
}
.QA h2{
font: normal normal 16px/1 Helvetica;
font-weight: bold;
color:#004E97;
}
.QA button{
text-align:center;
width: auto;
background: #E2F4FE;
font-weight: bold;
font-size: 14px;
text-shadow: none;
color: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
cursor: pointer;
padding: 6px 14px;
margin: 2px;
outline: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.QA1 button{
text-align:left;
width: auto;
background: #E2F4FE;
font-weight: bold;
font-size: 14px;
text-shadow: none;
color: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
cursor: pointer;
padding: 6px 14px;
margin: 2px;
outline: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.QA button:hover{
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60; background: #C1EEFE;
}
.QA1 button:hover{
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60; background: #C1EEFE;
}
textarea {
background-color: #FFFFFF;
}
.index {
z-index: 55;
}
.switch-field {
font-family: Helvetica;
padding: 10px;
overflow: hidden;
font-size:0px;
}
.switch-title {
margin-bottom: 6px;
}
.switch-field .input-field {
text-align:center;
display: inline;
width: auto;
background-color: #F2F0F0;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
font-weight: bold;
text-shadow: none;
padding: 6px 14px;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked + label {
background-color: #5EA8EE;
-webkit-box-shadow: none;
box-shadow: none;
}
.switch-field .input-field:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field .input-field:last-of-type {
border-radius: 0 4px 4px 0;
}
#onlinetak:checked + label:first-of-type { background-color:#5EA8EE; }
#onlinenie:checked + label:last-of-type { background-color:#EE5B5B; }
<form>
<div class="switch-field">
<div class="input-field">
<input type="radio" id="onlinetak" name="online" required/>
<label for="onlinetak">Online</label>
</div>
<div class="input-field">
<input type="radio" id="onlinenie" name="online" required/>
<label for="onlinenie">Offline</label>
</div>
</div>
<button type="submit">Submit</button>
</form>
EDIT 2: Another (admittedly hacky) way of doing it is to set a negative z-index on the inputs themselves so that they don't appear to be inside the labels themselves. The error still shows near the input group, but the inputs are "under" the labels (and not set to display: none), so the error displays where the inputs are.
.switch-field input {
position: absolute;
z-index: -10000;
}
Your code may need to be in a form in order for your required to work.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="switch-field">
<form>
<input id="onlinetak" name="online" type="radio"> <label for="onlinetak">Online</label> <input id="onlinenie" name="online" type="radio"> <label for="onlinenie">Offline</label> <button type="submit">Submit</button>
</form>
</div>
</body>
</html>
Jsfiddle - https://jsfiddle.net/qegxnjm2/1/
enter code here
Online
Offline
The following code snippets show two examples of a text input field. When focused, the bottom of the input increases in thickness and changes color.
The first example uses a combination of border-bottom and box-shadow to achieve the effect. The second example uses just box-shadow. I think that the effects should be identical. However, the box-shadow only example 'jumps' when finishing its transition. Why? Is there a way to improve it?
Example has only been tested on the stable version of Webkit.
input[type="text"] {
border-top: none;
border-left: none;
border-right: none;
padding: 0 0 8px 0;
transition: box-shadow 0.3s, border 0.3s;
will-change: box-shadow, border;
outline: none;
box-sizing: border-box;
}
#example1 {
border-bottom-width: 1px;
border-bottom-color: rgba(0, 0, 0, 0.26);
}
#example1:focus {
border-bottom-color: #2196F3;
box-shadow: inset 0 -1px 0 #2196F3;
}
#example2 {
border-bottom: none;
padding-bottom: 9px;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .26);
}
#example2:focus {
box-shadow: inset 0 -2px 0 #2196F3;
}
<input type="text" id="example1" placeholder="I'm a good example">
<input type="text" id="example2" placeholder="I'm a bad example">
Looks fine when I run it, and I'm on Chrome.
The first thing you should do is ensure that you have an up to date browser: transition was only universally adopted a few releases ago.
Secondly, transitions don't work perfectly on every element, or work at all on some.
Use this awesome tool to check the elements you are trying to animate for compatibility:
http://caniuse.com/#feat=css-transitions
input[type="text"] {
border-top: none;
border-left: none;
border-right: none;
padding: 0 0 8px 0;
transition: box-shadow 0.3s, border 0.3s;
will-change: box-shadow, border;
outline: none;
box-sizing: border-box;
}
#example1 {
border-bottom-width: 1px;
border-bottom-color: rgba(0, 0, 0, 0.26);
}
#example1:focus {
border-bottom-color: #2196F3;
box-shadow: inset 0 -1px 0 #2196F3;
}
#example2 {
border-bottom: none;
padding-bottom: 9px;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .26);
transition: box-shadow .1s;
}
#example2:focus {
box-shadow: inset 0 -2px 0 #2196F3;
transition: box-shadow .4s;
}
<input type="text" id="example1" placeholder="I'm a good example">
<input type="text" id="example2" placeholder="I'm a bad example">
I have a website. I have used a search bar on the top next to the logo. Whenever we type something the search works and is redirected to the appropriate page but in a video playback page or you can say on any other page the search does not works.
First, try it on main page and it works.
http://www.trueflick.com
On any other page or video playback page like this it will not work.
trueflick.com/videos/277/6-dreamcast-facts-which-makes-it-awesome-factsurgery/
Although the code is same. Here is the CSS code which is used in CSS file.
#search {
}
#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #000;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
width: 300px;
}
You have more than one form with matching IDs (search) as well as inputs with matching names of q. Get rid of the second one further down the page (or rename the form and input elements)
I tested this in Chrome and was able to search once I deleted the conflicting node.
Don't forget your closing </form> each time.
I disabled the search box on IE, because IE kept centering it over the navigation.
It works in Chrome, I'm not sure about opera (and I'm not sure if I care) but it won't work in Firefox. The ease-out timing works in Firefox, but nothing else really works.
I've tried other things to work around the issue, but every time I try something different, the search box's positioning gets thrown off.
If you look at it in Firefox, it looks fine-- until you click on it to search. http://kissoff.weebly.com/ You can see what the search box is supposed to do if you look at it and click on it in Chrome.
I'm sure the positioning is off, I'm not sure (I'm new to css). Any help is appreciated.
#search {}
#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
position: fixed;
margin-left: 350px;
margin-right: 0px;
margin-top: 0px;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
float: right;
}
#search input[type="text"]:focus {
width: 200px;
}
you were forgetting to edit margin-left.
http://jsfiddle.net/xeemez/nZBNm/
#search{
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
position: fixed;
margin-left: 350px;
margin-right: 0px;
margin-top: 0px;
color: #bebebe;
width: 15px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
float: right;
}
#search:focus {
width: 200px;
margin-left: 200px;
}
http://jsfiddle.net/xeemez/nZBNm/