I've tried this in my project, on jsfiddle etc.
why am I getting a weird grey outline here:
all I have applied is:
.myInput{
font-size: 15px;
text-align: center;
border-radius: 20px;
}
<input class="myInput" />
I obviously just want it to be like this without the dary grey outline...
You can fix it with "border:none" or something similar. Take a look at the border property for more info.
I've used "1px solid black" in the example below.
.myInput{
font-size: 15px;
text-align: center;
border-radius: 20px;
border: 1px solid black;
}
<input class="myInput" />
Extra notes
The reason you're seeing this behaviour is because the browser will apply a default style to your elements. By not overwriting them with CSS your elements will adhere to said style. You don't really notice this when you don't add a border-radius because Chrome (I tested on Chrome) outlines input fields with a teeny tiny grey border. Once you add the border-radius however things become more noticeable.
The answer, therefore, is to take a look at the available border properties to style the input how you'd like, rather than relying on the default styling of the browser.
Related
I have a style for inputs on my page, with some basic padding and font size, I tried applying the same style to a link, but for some reason the link is always larger (height) than the button no matter what I do, even with the exact same text and font size, I tried doing display: block but that just makes the button the width of the screen.
Here is the CSS:
.button{
padding: 10px 15px 7px 15px!important;
font-size: 16px !important;
color: white;
cursor: pointer;
border-radius: 2px;
text-decoration: none;
}
.button-3{
background-color: #ff4d4d;
border: 1px solid #ff4d4d !important;
}
I've looked at the Chrome styles panel and confirmed the font / padding is being used (it's not strikken through).
Here is what it looks like:
Looks like the issue is because:
You aren't using a CSS reset.
The line-height needs to be the same.
Make sure you give a consistent line-height to both. For now, set in the both:
line-height: 1.5;
This should fix it. Also, you can compare both the styles with the computed ones, to check if there's anything else being set. Since you say <button>, it might also have some border.
Also, like I guessed, you are also giving border and same colour as background to the button, making it look 2px bigger.
When you open the Developer Tools, try comparing the Computed Styles part:
To avoid this kind of stuff I always set the font family I used.
Take a look at this example: https://fiddle.jshell.net/tnr0jxka/
You also might want to consider adding:-webkit-apperance:none;-moz-apperance:none; to this kind of css, it will save you big time in cross-browser experience.
Buttons do not inherit the global styling automatically.
So, setting font-size of button explicitly will solve the problem
see this solution for more info
It seems the only option available today is border=x where x is the thickness of the border. It looks really ugly as it outlines each choice in the group.
I want a simple border around all the choices. When I go into debug it I can manually add fram="box" to the generated Table html and it looks great.
I can't figure out how to add frame="box" to the xp:checkBoxGroup I've tried using attributes without success.
Any ideas?
If you use a xp:checkBoxGroup the XPages runtime puts the checkboxes in table cells and wraps it with a fieldset element. You can easily target that using some CSS. That's how I would solve this.
If you want a simple border around your checkbox group you can do this:
<style>
fieldset.xspCheckBox {
border: 1px solid #333333;
}
</style>
<xp:checkBoxGroup id="checkBoxGroup1">
<xp:selectItem
itemLabel="Blue"
itemValue="blue">
</xp:selectItem>
<xp:selectItem
itemLabel="Green"
itemValue="green">
</xp:selectItem>
</xp:checkBoxGroup>
Or if you want a border around every option you can use this:
<style>
fieldset.xspCheckBox {
border: 0;
}
fieldset.xspCheckBox label {
border: 1px solid #444444;
padding: 5px;
cursor: pointer;
}
fieldset.xspCheckBox label:hover {
background: #eeeeee;
}
</style>
(note that the :hover class isn't really necessary, but adds a hover effect to all options: depending on your browser requirements that might not be supported)
Just add a style with a border definition to your xp:checkBoxGroup:
<xp:checkBoxGroup id="..." value="..." style="border:1px solid black;">
...
</xp:checkBoxGroup>
Instead of putting the style directly into xp:checkBoxGroup definition you can use a css class.
I'm trying to align a submit button (input type="submit") with a text input (input type="text") but in Chrome the submit button is always slightly smaller.
Here's the HTML:
<input type="email" placeholder="Secret Sale ♥ Enter your email" name="MERGE0" class="email" size="22" value="">
<input type="submit" class="button" name="submit" value="Join">
And here's the CSS:
#header-top .newsletter .email, #header-top .newsletter .button { font-size: 12px; line-height: normal; box-sizing: border-box; padding: 5px; }
As you can see I've tried setting the padding and line-height to be the same for both elements, and after reading around on Stackoverflow I've seen references to setting the box-sizing too which unfortunately hasn't made any difference.
Here it is in IE (fine):
And in Firefox (also fine):
And finally in Chrome (button too small, or text input too big?):
Here's the live site if it helps too: http://www.arabel.co.uk/about-arabel/faqs
Any help with this would be much appreciated, I'm completely stumped as to why it's bigger in Chrome. Thanks!
Chrome is adding a default 2px border to your textbox due to some reason. Your text box and button both have the same padding, but the text box has a 2px border and the button has a 1px border. A quick fix would be to add an individual padding of 5px to ".email".. everything looks a okay. If you change it in the common css line, then both items will get the padding, and they will still be skewed.
#header-top .newsletter .email{
padding: 4px;
}
And make sure you add this after the line that defines the css for both .email and .button, so that this will overwrite the 5px padding.
Alternatively, you can also do away with that combined css altogether and add individual padding or 4px for .email and 5px for .button
Likely hasn't something to do with browser default styles.
You could try including a reset.css in your page.
http://meyerweb.com/eric/tools/css/reset/
It could have unattended effects else where though.
I came across a little browser compatibility issue.
i have a search input field <input type="search">
and while in Chrome the height is exactly as i want it to be (30px),
the height in IE is always 2px more (32px)
heres the css code:
.search_field{
width: 80%;
height: 30px;
border: solid;
border-width: 1px;
border-color: #eeeeee;
margin: 5px 0 5px 0;
padding: 0px;
}
.search_field:focus{
outline-width: 1px;
outline-style: solid;
outline-color: #919191;
}
html:
<li>
<b>Search</b><span style="float: right; font-size: 10px;">Advanced Search</span><br>
<input type="search" class="search_field">
<input type="submit" value="Search" class="search_input">
</li>
Are there any other IE defaults besides those i already tried to change?
Thanks!
I think, it's because of border you are adding with it. So, 1px from top and 1px from bottom, this way it's taking 2px more than it. Try fixing this once.
if not even this works, then you can add some css hacks like:
_height : 28px; /* IE 6 */
*height: 28px; /* IE 7 */
Note: Keep this in mind that these are not valid css. I mean when you will validate it, it won't. Take reference: http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
Are there any other IE defaults besides those i already tried to
change?
You can easily inspect your element style attributes using The IE Developer tool.
Just hit the F12 key and inspect your input search field.
Click the arrow button inside of the Developer Toolbar window at the bottom of the screen and select which Element needs to be inspected by placing the cursor over the Element and then click on that Element
Add the following CSS code, as suggested by #Passerby in a comment:
.search_field { box-sizing: border-box; }
The reason is that otherwise the height property specifies the content width, excluding padding and border, and the 1px borders above and below thus make the total height 30 + 1 + 1 pixels. The box-sizing property can be used to override this.
Arguably, IE (and Firefox) is doing the right thing here, since the HTML5 CR says, in the section about form field rendering, that in “standards mode”, an input element with type=search has normal CSS sizing, whereas in Chrome, it has box-sizing: border-box in the browser style sheet.
For some reason most modern browsers will stop applying their default input border style to text boxes if you give them a background image. Instead you get that ugly inset style. From what I can tell there's no CSS way to apply the default browser style either.
IE 8 doesn't have this problem. Chrome 2 and Firefox 3.5 do and I assume other browsers as well. From what I've read online IE 7 has the same problem, but that post didn't have a solution.
Here's an example:
<html>
<head>
<style>
.pictureInput {
background-image: url(http://storage.conduit.com/images/searchengines/search_icon.gif);
background-position: 0 1px;
background-repeat: no-repeat;
}
</style>
<body>
<input type="text" class="pictureInput" />
<br />
<br />
<input type="text">
</body>
</html>
In Chrome 2 it looks like this: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6
And in Firefox 3.5: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc
Update: JS Solution: I'm still hoping to find a pure CSS-on-the-input solution, but here's the workaround I'll use for now. Please note this is pasted right out of my app so isn't a nice, stand alone example like above. I've just included the relevant parts out of my large web app. You should be able to get the idea. The HTML is the input with the "link" class. The large vertical background position is because it's a sprite. Tested in IE6, IE7, IE8, FF2, FF3.5, Opera 9.6, Opera 10, Chrome 2, Safari 4. I need to tweak the background position a couple pixels in some browsers still:
JS:
$$('input.link').each(function(el) {
new Element('span',{'class':'linkIcon'}).setText(' ').injectBefore(el);
if (window.gecko) el.setStyle('padding', '2px 2px 2px 19px');
});
CSS:
input.link { padding-left: 19px; }
span.linkIcon { z-index: 2; width: 19px; height: 19px; position: absolute; background-image: url(img/fields.gif); background-position: 1px -179px; background-repeat: no-repeat; }
Update: CSS Close Enough Solution: Based on the suggestion from kRON here's the CSS to make the inputs match FF and IE in Vista which makes a good choice if you decide to give up on pure defaults and enforce one style. I have modified his slightly and added the "blueish" effects:
CSS:
input[type=text], select, textarea {
border-top: 1px #acaeb4 solid;
border-left: 1px #dde1e7 solid;
border-right: 1px #dde1e7 solid;
border-bottom: 1px #e3e9ef solid;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
padding: 2px;
}
input[type=text]:hover, select:hover, textarea:hover, input[type=text]:focus, select:focus, textarea:focus {
border-top: 1px #5794bf solid;
border-left: 1px #c5daed solid;
border-right: 1px #b7d5ea solid;
border-bottom: 1px #c7e2f1 solid;
}
select { border: 1px; }
When you change border or background style on text inputs They revert back to the very basic rendering mode. Text inputs that are os-style are usually overlays (like flash is) which are rendered on top of the document.
I do not believe there is a pure CSS fix to your problem. Best thing to do - in my opinion - is to pick a style that you like and emulate it with CSS. So that no matter what browser you're in, the inputs will look the same. You can still have hover effects and the like. OS X style glow effects might be tricky, but I'm sure it is doable.
#Alex Morales: Your solution is redundant. border: 0; is ignored in favor of border: 1px solid #abadb3; and results in unnecessary bytes transferred across the wire.
This is the CSS that I use that can provide the default look back:
input, select, textarea {
border-top: 1px #acaeb4 solid;
border-left: 1px #dde1e7 solid;
border-right: 1px #dde1e7 solid;
border-bottom: 2px #f1f4f7 solid;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
You could also apply :active and give the controls that blueish hue once they're selected.
Update!
Ok, here is a workaround that I think is cross-browser compatible. The only issue would be that the default style differs by a few pixels so this might need some tweaking.
<html>
<head>
<style>
.pictureInput {
text-indent: 20px;
}
.input-wrapper {
position:relative;
}
.img-wrapper {
position:absolute;
top:2px;
left:2px;
}
</style>
</head>
<body>
<div class="input-wrapper">
<div class="img-wrapper"><img src="http://storage.conduit.com/images/searchengines/search_icon.gif" alt="asddasd" /></div>
<input type="text" class="pictureInput" />
</div>
<br />
<br />
<input type="text">
</body>
</html>
By using absolute-relative positioning you can make the absolute div (containing the image) act absolute in relation to its parent which all browsers I know about (not counting sub-IE6 versions, IE6+ are fine) can handle. User scaling might be an issue, but this is how it is with workarounds.
On the upside, you don't have to change the styles on your inputs at all (except for text-indent, but you'd do that anyway I hope).
On the downside, it's not the prettiest workaround.
Old!
I know this is not what you want, but you could do something like this to at least make all the input borders consistent.
input {
border-color:#aaa;
border-width:1px;
}
I haven't tried it in all browsers, but since you aren't setting the border-style it might use the native style but with another size (though you can skip that too). I think the key is to just set the border-color to something so that all input fields will use the same border-color and leave the rest up to the browser.
I had a text background image, and this was also annoying me. So I put a relative <div> round the <input> and then added the image absolutely positioned over the <input>.
Then of course I needed a little more Javascript to hide the image if it was clicked, or if the input got the focus by tabbing, or by being clicked around the edges of the image.
With a bit of fiddling this looked pretty good with IE8, Firefox, Chrome, and Opera, but it's a horrible kludge and it would be nice if the browsers fixed it.