Why do universal selectors not reset the user agent stylesheet - html

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.

Related

How to get input fields and submit button same size

I'm new to this site and a beginner at html and css. I'm working on a personal project for practice and the design calls for both the input box and submit button to be a height of 55px and a width of 320 px. Both of these include a 2px border and a 15px padding. I'm not sure why my current code is not producing the same sizes. The input button is clearly smaller (both width and height) than the input boxes.
Any help would be appreciated.
body {
background-color: blue;
}
/* LOGO */
.logo img {
height: 35px;
padding: 50px;
display: block;
margin: 0 auto;
}
/* FORM */
.form {
background-color: white;
width: 400px;
height: 500px;
padding: 40px;
border-radius: 5px;
margin: 0 auto;
}
h1 {
font-family: "Courier New", Courier;
font-weight: normal;
text-align: center;
padding: 20px;
}
input[type='email'],
input[type='password'],
button[type='submit']{
height: 38px;
width: 303px;
border: 2px solid gray;
padding: 15px;
margin: 15px auto;
display: block;
font-size: 15px;
border-radius: 5px;
}
button {
background-color: green;
}
span {
color: white;
}
<div class="logo">
<img src="images/logo.png" alt="AnalogSea logo">
</div>
<div class="form">
<h1>Sign up</h1>
<form action="/signup" method="post" class="form_section">
<label class="email button_size" for="email" required>Email</label><br>
<input placeholder="foo#bar.com" type="email" name="email" id="email"><br>
<label class="email button_size" for="password" required>Password</label><br>
<input placeholder="1234passw0rd" type="password" name="password"><br>
<button type="submit"><span>Sign Up</span></button>
</form>
</div>
The reason it's happening is the way the box-model is rendered in browsers. In your example, the padding is what is causing the issue. For the button, the padding and border is included in the 303px, so the button is a total of 303px wide. For the <input> elements, the padding and border is added to the total width, giving it a width of 337px.
To fix this you can go about it a couple ways. You can reset the box-sizing (the property in CSS that handles this) globally like:
* { box-sizing: border-box }
Or you can add that to just the <input> elements.
input[type="whatever"] { box-sizing: border-box }
I personally do it globally as a reset, to make things consistent. That's a my preference.
If you do this, you'll have to readjust the height on your elements to 68px, because now the padding will be considered as part of the height property, not added to it.
Here's some reading on the box-model: http://www.w3schools.com/css/css_boxmodel.asp
Here's some reading on the box-sizing property: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Hope this helps!
I would change:
<button type="submit"><span>Sign Up</span></button>
to
<input type='submit' value='Sign Up' />
then alter your CSS. This solution is more backward compatible, as well.

CSS: Styling an input element's text (as opposed to the input element itself)?

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.

Aligning checkbox and input text in same line for code given below

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.

Apply CSS style to <div>

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.

How can I control the height of text inputs and submit input buttons in different browsers?

I have a very little but hard (for me) problem to solve.
I have a text input, and a submit button. I need them to be the exact same height and for this to be true across Chrome and Firefox, ideally internet explorer also.
HTML
<input type="text" name="email" /><input type="submit" value="»" />
CSS
input[type=text] {
width: 218px;
}
input[type=submit] {
background: #000;
color: #fff;
}
input[type=submit], input[type=text] {
padding: 9px;
font-size: 18px;
line-height: 18px;
float: left;
border: 0;
display: block;
margin: 0;
}
I've setup this basic code on a jsfiddle here.
You should notice if you load it in chrome, the button is less height than the text input and in firefox, its larger.
What am I missing?
Remove/add line-height: 18px; for both.
Vertical padding of the submit button has no effect. This seems to be a webkit bug. You can solve the problem by specifying explit heights and increasing the height of the submit button by the top and bottom padding of the input field.
input[type=text] {height: 60px;}
input[type=submit] {height: 78px;}
The problem is your padding that is applying wrong to your button.
Trying solving it like this.
input[type=submit], input[type=text] {
font-size: 18px;
line-height: 18px;
float: left;
border: 0;
display: block;
margin: 0;
height: 30px; /* or whatever height necessary */
}
Additionally, you can keep the padding left and right on your button like this.
input[type=submit] {
background: #000;
color: #fff;
padding: 0px 9px;
}
input {
height: 19px;
}
This maybe?
Also, remove the padding property.
http://jsfiddle.net/xkeshav/e6aTd/1/
Maybe it's the padding that is making problems. Try removing the padding, setting the button to a fixed height and make the offset with line-height.
You need to remove the height and work on the actual height of the input text field just by padding/font-size
jsfiddle
Removing/adding line-height: 18px; for both is not a perfect solution because I see a little difference height in firefox...
The best solution I found is to put a div arround and set its style to display: flex.
All is perfect this way.
body {
background: #ccc;
}
div{
display: flex;
}
input[type=text] {
width: 218px;
}
input[type=submit] {
background: #000;
color: #fff;
}
input[type=submit], input[type=text] {
padding: 5px;
font-size: 25px;
border: 0;
margin: 0;
}
<div><input type="text" name="email" /><input type="submit" value="»" /></div>
TRY
body {
background-color: #ccc;
}
input[type=text] {
width: 218px;
}
Working DEMO