I have a contact form that I'm styling at the moment. I simply want the outline of the form to change to red when active and nothing to happen when hovered over.
I have this working in all browsers apart from Internet Explorer. I'm using Internet Explorer 11 on Windows 7.
In IE, at the moment there is a default hover which I can't figure out and when clicking in the input element, the outline-color doesn't change.
Another issue is that I have applied padding-left inside the input so that both the placeholder and user's text aren't touching the edge. For some reason, this has pushed the entire input to be wider than it should. It does have max-width: 100% applied to it. The div that contains the form has padding on the sides and now the input is pushing into the padding. This occurs in all browsers.
Here is basic example: http://jsfiddle.net/Forresty/fr7Lz2wj/1/
Here is the code:
HTML:
<div id="contactForm">
<input type="text" name="name" id="name" placeholder="Your Name" required maxlength="65" tabindex="1">
</div>
SCSS:
#contactForm{
box-sizing: border-box;
width: 100%;
max-width: 64em;
margin: 0 auto;
padding: 0 1.25em;
}
input {
width: 100%;
height: 3em;
padding-left: 1em;
&:focus {
outline-color: red;
}
&:hover {
outline-color: none;
}
}
Any help with this would be highly appreciated.
Thanks.
To avoid the input field to go over either you apply a percentage padding (ie. 1.5% ) and set input width at 100% minus 1.5% (98.5%) or you have to use css box-sizing:border-box on the input itself.
To have outline on focus you have to specify an outline-style.
input {
width: 100%;
height: 3em;
padding-left: 1em;
box-sizing: border-box;
&:focus {
outline-style: dotted;
outline-color: red;
}
}
http://jsfiddle.net/fr7Lz2wj/5/
Related
HTML
<form action="/login">
...
<label for="password">Password</label>
<input type="password" id="password" name="pw">
<br>
<button>Log in</button>
</form>
CSS
* {
margin: 0;
padding: 0;
}
label {
display: inline-block;
width: 60px;
height: 20px;
text-align: left;
font: 12px/20px Arial;
}
input {
box-sizing: border-box;
width: 200px;
height: 20px;
border: 1px solid #ddd;
margin-bottom: 20px;
}
What made me feel puzzled is the input's padding. Because I wrote these rules above
/*
to reset margins and paddings in the user agent stylesheet, which is expensive, but I did it just for testing.
*/
* {
margin: 0;
padding: 0;
}
/*
In my opinion, the following rules will result in a 198*18 content box with a 1px border surrounding it.
While it didn't.
*/
box-sizing: border-box;
width: 200px;
height: 20px;
border: 1px solid #ddd;
The result is the input has 1px paddings, top and bottom. The snapshots is at the footer of the question. The universal selector didn't reset the padding for input elements.
What's the reason? Looking forward to the reply.
Snapshots: [removed]
Hello, everyone. Sorry for the inconvenience. I finally found what's wrong with it. It has nothing to do with the code piece I cut off. Here is the pivotal snapshot. So what the hell is \u200b?
\u200b
To be honest, I should found the mistake earlier, because the universal selector rule didn't appear on the right panel. It's my fault.
You have a zero width space character in your selector.
This renders the selector invalid, so it doesn't match anything, but is really hard to see in an editor.
EDIT: I've added the relevant code below at the bottom of this question. As you'll see there, the button is wrapped within a div. Also, this problem only occurs in one browser, that being Firefox, and I'll be using a hack to target that browser only.
I have an input element of type submit (i.e., basically a submit button). The text displayed in this element, as defined in the element's value attribute, appears too low (i.e., too close to the bottom of the button instead of vertically centered). The button has a fixed height.
Naturally, I want to move the button's text, as defined in the value attribute, one or two pixels upwards.
I've tried a few things with the button's padding (top and bottom), but that didn't change anything. [Is that to be expected, BTW?] Therefore, I would like to use relative positioning to move the text upwards a bit.
The thing is, however, that I need to target the text itself, NOT the input/button element. And that's of course because the button itself should stay at its current location, I only want to move the TEXT displayed on the button.
Thus my question: Is there a way, in CSS, to target not the button but only its displayed text (as defined in the value attribute) ?
Of course, other solutions (preferably CSS only) are welcome as well.
Code:
HTML:
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<div class="erom" id="erom2">
<input id="zoekknop" style="float: right" type="submit" method="GET" value="Search!" />
</div>
</form>
CSS:
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
}
.erom {
height: 100%;
display: inline-block;
box-sizing: border-box;
}
#erom2 {
border: solid 1px #452F5D;
width: 27%;
display: inline-block;
box-sizing: border-box;
}
#zoekknop {
float: right;
height: 100%;
color: white;
font-size: 19px;
box-sizing: border-box;
background-color: #446666;
color: white;
letter-spacing: 2px;
border: solid 1px white;
width: 100%;
}
And finally the part where I'm targeting Firefox only, and where I can't get the padding working (and to be sure, the "media query" (it's not really a media query) does work, and in any case I've also tried this without the media query, i.e. as part of the regular CSS):
#-moz-document url-prefix() {
#zoekknop {
padding-top: -1px !important;
padding-bottom: 9px !important; // I set it to 9px for now, so that I could clearly see if it worked
}
}
For some reason form elements are particular and quirky about font.
Assign a font to the <submit>'s parent, then use font: inherit on the <submit> button.
On the <submit> assign line-height of 1.4 to 2 (notice there's no unit like px or em.) I actually have the line-height assigned by inheriting the font from <form> 1.4.
Set width using the ex unit of measurement. One ex is as wide as ax character, making it a great way of gauging how much space you are using in relation to your text. I used 9ex for a 6 character word (i.e. Submit).
This ruleset may help you for Firefox:
input::-moz-focus-inner {
border: 0;
padding: 0;
/* Some users have said these last two are
unnecessary or should be -2px */
margin-top:0;
margin-bottom: 0;
}
Here's some changes I did to your button and search field:
#zoekknop {....
....
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0;
}
Review the Snippet below:
#form {
font: 400 16px/1.4'Verdana';
}
#form .sub {
font: inherit;
width: 9ex;
color: blue;
border-radius: 5px;
}
#form .sub:hover {
color: cyan;
background: #888;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
font: 400 16px/1.4 'Verdana';
}
#zoekform #zoekknop {
color: white;
font-size: 18px;
box-sizing: border-box;
background-color: #446666;
color: white;
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
input::-moz-focus-inner {
border: 0;
padding: 0;
margin-top: 0;
margin-bottom: 0;
}
<form id="form" name="form">
<input type="submit" class="sub" value="Submit" />
</form>
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<input id="zoekknop" type="submit" method="GET" value="Search!" />
</form>
This should work
#buttonID{
width: 500px;
height: 500px;
padding-bottom: 100px;//pushes text up inside the button
}
Make sure you define the height, width, line-height, font-size, and padding of the button. Then you should be able to manipulate the padding and line-height to get the result you want. It sounds like the button may be inheriting a line height that is causing the issue.
Targeting the text itself isn't the way to go about this. Would be helpful to see the CSS and HTML of the button, and note which browser the issue appears in.
I want to align the checkbox, label and text input in a same line using css. I can do it by using the default template of the browser.
However I really liked the simple theme given in this link. The theme has label and a input text. I wanted to add a checkbox as well at the beginning of the line. Somehow adding a checkbox inside the div makes the arrangement awry.
Though its better to look at the code in the link, I am providing a snapshot here:
HTML
<form>
<div>
<!--NEED TO ADD CHECKBOX HERE -->
<label for="pub_url">Public URL</label>
<input type="text" id="pub_url" name="pub_url" value="http://cssdeck.com">
</div>
</form>
CSS3
/* Onto the styling now. Some quick generic styles first. */
html, body {
width: 100%; height: 100%;
}
body {
font-size: 76%;
font-family: Verdana;
background: #eee;
padding: 50px 0;
}
form {
background: #fafafa;
padding: 20px;
width: 400px;
margin: 0 auto;
border: 1px solid #ffe2e3;
}
form div {
/* Float containment */
overflow: hidden;
}
/* Things are looking good now, onto the main input field
styling now! */
/*
Lets change the box model to make the label and input
contain into the 100% div.
You might want to specify the box sizing properties inside
`* {}` at the top.
Things are looking great now! Lets just spice it up a bit.
*/
form label, form input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form label {
font-weight: bold;
background: linear-gradient(#f1f1f1, #e2e2e2);
padding: 5px 10px;
color: #444;
border: 1px solid #d4d4d4;
/* lets remove the right border */
border-right: 0;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
line-height: 1.5em;
width: 30%;
/* takes the width properly now and also the
spacing between the label and input field got removed. */
float: left;
text-align: center;
cursor: pointer;
}
/* The label is looking good now. Onto the input field! */
/*
Everything is broken now! But we can fix it. Lets see how.
*/
form input {
width: 70%;
padding: 5px;
border: 1px solid #d4d4d4;
border-bottom-right-radius: 5px;
border-top-right-radius: 4px;
line-height: 1.5em;
float: right;
/* some box shadow sauce :D */
box-shadow: inset 0px 2px 2px #ececec;
}
form input:focus {
/* No outline on focus */
outline: 0;
/* a darker border ? */
border: 1px solid #bbb;
}
/* Super! */
p.s: It will be delightful if someone can stylize the checkbox in the same way as the example
try this one,
form input[type="checkbox"] {
width:20px;
}
<div>
<input type="checkbox" >
<label for="pub_url">Public URL</label>
<input type="text" id="pub_url" name="pub_url" value="http://cssdeck.com">
</div>
http://jsfiddle.net/KW6AY/1/
Here you go \w quick styling:
http://codepen.io/daniesy/pen/puema
alter the css to input[type="text"] and lower the width to around 60% (so it won't affect your checkbox), add a checkbox with a float left
just rename class
form input into form input[type="text"]
Good luck.
Context:
I have an <input> element constructed as follows:
HTML:
<div class="field field-3">
<span><input type="text" placeholder="Username" name=""></span>
</div>
CSS:
(with reset.css stylesheet written by Meyer in the same stylesheet)
.field {
padding: 20px 10px;
position: relative;
overflow: hidden;
}
.field > span {
background-color: #fff;
border: 1px solid #bbc3d3;
float: right;
padding: 8px 15px;
position: relative;
}
.field > span input[type="text"] {
background-color: transparent;
border: 0 none;
color: #9da3af;
display: block;
font-family: $font-open;
#include font-size(12px);
margin: 0;
outline: 0 none;
overflow: hidden;
padding: 3px 0;
resize: none;
width: 838px;
height: 22px;
}
The Glitch:
The input element placeholder shown as seen in the first image.
When I click inside the element and write something, the text moves one pixel down.
Where?:
The glitch only is displayed on Google Chrome
The question: How do I fix and avoid this from happening?
Update
A koala_web suggestion, use jsFiddle (link) to exemplify.
Note: Ironically, in jsFiddle the problem does not play, but I put the link to the template example (link) where the glitch appears.
Try removing the line-height declaration from line 297 of your style.css file
html, body, button, input, select, textarea {
font-size: 12px;
/*line-height: 1.231; remove this*/
}
I have never seen this glitch before and it does not seem like a big deal, however this is how I could deal with it. I would add a background image to the input box with the text center aligned in the center. Then apply it to the <input> css. When the user clicks on the input box make it so background-image is none. Like so:
<html>
<head>
<style>
#usernameInput{
background-image: url(usernamePlaceholder.jpg);
}
</style>
</head>
<body>
<input id="usernameInput" type="text" name="">
<script>
$('#usernameInput').click(function(){
$('#usernameInput').css({
'background-image' : 'none'
});
});
</script>
</body>
</html>
Here is a Jsfiddle
My problem is with the below html
<div class="editor-container">
<div class="editor-row curFocus">
<div class="editor-label">
<label for="FirstName">First Name</label>
</div>
<div class="editor-field">
<input class="text-box single-line valid" id="FirstName"
name="FirstName" type="text" value="Nancy" maxlength="20">
</div>
</div>
</div>
When the user selects the input field, I add class "curFocus" to the outer div via some javascript to highlight both label and the input field.
My css is -
.editor-container {
border: thin solid #444444;
display: table; width: 100%;
}
.editor-row {
width: 100%; display: table-row;
}
.editor-label {
padding-left: .4em; width: 40%;
}
.editor-label, .editor-field {
padding-right: .4em; padding-bottom: .2em; padding-top: .2em;
display: table-cell;
}
.curFocus {
border: 2px solid #05365b;
background-color: #d3e5f2;
margin: 3px; padding: 3px;
}
My problem is that while using debuggers in Chrome 12 and IE9, they both show the border settings being applied to the outer div. But, when viewing the form, neither browser display's the specified border. All other css settings work correctly. I also tried changing definition of ".curFocus" to ".curFocus div". But this applied the style to each of the nested div's also, but did display borders on all of the divs.
While I'm not a CSS expert, it is not obvious why this shouldn't work.
Edit
Here is jsfiddle link - http://jsfiddle.net/photo_tom/KmsF5/1/. While testing this it does work correctly in IE9 if in IE7 compatibly mode. Otherwise, it does not display correctly.
Sorry about not including link, still getting use to fact that jsfiddle even exists.
Well, I can tell you what's causing it, but I can't tell you why. Elements with display: table-row; can't have a border applied to them. You can apply the border to the table-cell children of the .curFocus element, but not the table-row itself.
Again, no idea why this silly rule exists, but you can fix your problem with some CSS:
.curFocus {
background-color: #d3e5f2;
margin: 3px; padding: 3px;
}
.curFocus>div {
border: 2px solid #05365b;
border-width: 2px 0px; /* top and bottom border for all the table-row's immediate children (table-cells) */
}
.curFocus>div:first-child {
border-width: 2px 0px 2px 2px; /* left border for the leftmost table-cell */
}
.curFocus>div:last-child {
border-width: 2px 2px 2px 0px; /* right border for the rightmost table-cell */
}
See http://jsfiddle.net/d772N/
I think your problem is your display type on the .editor-row. display: table-row; Remove that and the problem will go away. Plus I don't think that all browsers support display: table-row; very well.
You might need a higher CSS specificity, as it is ambiguous which CSS styles will apply with the current definitions.
Try div.curFocus rather than .curFocus div for the class definition to apply the style to the div with that class name rather than its div children.