<input type="submit" value="Share" />
In Chrome/Safari:
http://img514.imageshack.us/img514/619/btnwebkit.png
In FF:
http://img220.imageshack.us/img220/347/btnff.png
Can someone please tell me why they don't look the same?
Even, when I set the font-size, font-family, padding and margin, the button in FF will always look bigger than the one in Chrome/Safari.
This is because default styles on HTML elements like input buttons and H1 and UL and LI and so forth are subject to the browser developer's whim. You can minimize the disruption by using a reset stylesheet. That said, you may get better results by using <button type="submit" value="Share">Share</button> instead of an input (with a type of button), and setting the styles on that.
Related
http://jsfiddle.net/4LXkE/
The code:
<form>
<input type="text" name="name" id="name" placeholder="Name*" required="required" />
<input type="submit" />
</form>
In the above fiddle, you can see that in IE9+ (that's what my target browser is) the input box is surrounded by an ugly red highlight and a popup message to show it is a required field.
I found the following question which is close, but doesn't give a full answer to my specific question:
override css for html5 form validation/required popup
In my application I have my own stylings (twitter bootstrap defaults) but they are hidden behind these styles which show up.
While I tried to debug the app in Developer tools, i couldn't find what CSS classes were being added or how.
Any help turning these off would be much appreciated, thanks!
IE9 does not support the "required" attribute natively, and it is not part of the UA stylesheet.
Are you using Modernizr or something similar along with Bootstrap? In IE9, the "required" attribute is useless without a polyfill. (see caniuse or this article for more information) Please look at Modernizr for a solution to this problem. If you're using a polyfill already, you should be able to style the shim element to get the appearance you want.
I cannot get this work, looks like not possible, that's why i'm asking...
This is the CSS used:
label.btn {
cursor:pointer;
display:inline-block;
}
label.btn>input[type=checkbox] {
display:none;
}
label.btn>input[type=checkbox]:checked~b {
background:red;
}
/* not relevant, just for testing purpose */
#divtest {
margin-top:1500px
}
Following HTML code will check the input, and then style for <b> tag is applied:
<a href="#divtest" id="anchor">
<label class="btn">
<input type="checkbox"/><b>Click should scroll to '#divetest' element and check input for styling!</b>
</label>
</a>
DEMO styling
If i add attribute 'for' to the label to target the anchor tag, the default browser scrolling works, but then no more styling applied:
<label class="btn" for="anchor">
DEMO anchor
Now, the obvious question:
Can i get these both behaviours working together in pure CSS?
An input element inside an a violates common sense as well as HTML5 CR. Nesting two interactive elements raises the issue which element is activated on mouse click.
Instead of such construct, use valid and sensible HTML markup. Then please formulate the styling question in terms of desired or expected rendering vs. actual rendering, instead of saying that “this” “does not work”.
This won't work since the Input:checkbox is INSIDE the <label>. Browsers will set focus on the input upon a click on the label.
I have this code that should show and hide element outputs according to specific checkboxes.
The output that I´ve got is that each checkbox, when clicked, shows more outputs than it should.
How can they be targeted using specific css IDs?
I mean, whan you click on each box, it should only appear the text that´s referencin that specific box, and not all of them.
Thanks for your insight!!
Rosamunda
DEMO
/*styled relative to the label*/
label {display:block;}
label ~ div {display:none; margin-left:1em;}
/*targetting*/
/*boxes with id having this number will style a sibling div with this number*/
input[type="checkbox"][id*="131"]:checked ~ div[class*="131"] {display:inline;}
input[type="checkbox"][id*="134"]:checked ~ div[class*="134"] {display:inline;}
input[type="checkbox"][id*="130"]:checked ~ div[class*="130"] {display:inline;}
You can use the contains *= selector. I'm not sure what browser compatibility it has, but it works for me in Chrome. For instance changing the CSS for the first of the three checkboxes looks like this:
input[id*="131"]:checked ~ div[class="tipo-uf-131"] {display:inline;}
This is close to a perfect example of overthinking things and relying too heavily on CSS. Stylesheets are supposed to be in charge of presentation not functionality. CSS selectors can be complex enough that you could use it for validation checks - does not make it a good idea though :)
You're much better off relying on javascript to accomplish this and would end up with a significantly wider browser support matrix. Change your markup a bit:
<label>Box 1:</label> <input class="form-checkbox" id="cb131" type="checkbox"/>
...<input class="form-checkbox" id="cb134" type="checkbox"/>
...<input class="form-checkbox" id="cb130" type="checkbox"/>
<div id="cb131-linked"><b>Box 1 is checked.</b></div>
<div id="cb134-linked">...</div>
<div id="cb130-linked">...</div>
...and you can add a jQuery listener so that when the state of a checkbox is toggled, you can show the related divs like so:
$checkboxes = $(".form-checkbox");
$checkboxes.change(function(){
console.log("changed");
$checkboxes.each(function(){
$this = $(this)
$("#"+$this.attr("id")+"-linked").toggle($this.is(":checked"));
});
});
Fiddle: http://jsfiddle.net/9t59j/11/
Also, inputs are supposed to be self-closing elements.
Hi all I have been looking around as I am fed up with the lack of compatibility for styling submit buttons.
I was looking at no other than facebook themselves source.
They do something like this:
<label class="uiButton uiButtonLarge Post">
<input type="submit" value="Post" />
</label>
They set the css display for the label as an inline-block and then set padding etc..
Is this the best way to do it?
Or is there an even better way?
Thanks!
http://www.tripwiremagazine.com/2010/03/35-essential-submit-button-enhancements.html
This tutorials should be fine, sure they're not identical with FB but there are crossbrowser stylings to pure css. Hope that helps.
How do I make the text box width look uniform across all browsers?
Please help me,
What do you mean a <textarea>?
Then just use css and set the width. e.g.
<textarea ..other stuff.. style="width:500px">
If it needs to be EXACTLY the same in every browser possible, then you will need to use flash or silverlight, as HTML inputs are supposed to be rendered as the user chooses them to be (according to the OS style).
You could do tricks with style to remove the system border and set them to the width you wich in pixels. For example see here: http://freeyourdesign.com/css/css-custom-search-field-or-textfield/
What about setting the width attribute in style
<input type='text' id='txt1' style='width: 100px;' />
Better create a class and apply that to the textbox
<style>
.txtBox { width: 100px; }
</style>
<input type='text' id='txt1' class='txtBox' />
If I understand correctly you are specifying a size in pixels and it is not working (if not, just set a pixel value using "width" in css)?
<input type="text" size="20">
This should be the same size across all browsers, but so should a pixel value specified in a CSS document. Can you post some code and the specific issues you are having with each browser?