My markup looks like so:
<p>
<select></select>
<input type="submit" id="submit" value="submit" name="submit" />
</p>
Here's the CSS:
//No specific styles for the select element nor inherited ones.
#submit {
background: url("images/img.png") no-repeat scroll 0 0 transparent;
border: 1px solid #FFFAEE;
cursor: pointer;
height: 34px;
margin-left: 30px;
width: 145px;
}
The issue is the submit button is a few pixels above the select element. Here's a screenshot:
This happens in Webkit browsers and IE but not in Firefox.
I copied your code into jsfiddle and the select and submit button align up nicely in ff,chrome and ie9.
http://jsfiddle.net/PTF3Q/
Apparently there's some code you're not supplying causing this - do you have a live url to the page?
If not, you could try: vertical-align: middle;
Related
In my web page I have a button. When I display the page in Chrome, everything works fine, but when I look at it in IE, the button text doesn't fit in the button (see image). Do you have a hint, what possibly causes this problem and how to fix it? I'm also using bootstrap v4.0.0.
Here is the code:
.button {
background-color: #002c4c;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
align: center;
width: 100%;
}
.row {
margin-right: 0;
}
.row-8 .col-lg-2 {
max-width: 225px;
}
<div class="row row-8">
<div class="col-lg-2">
<form action="/MyProject/print?language=de" method="post" name="printForm" onsubmit="return validateForm()" target="_blank">
<input type="submit" class="button" name="btn_print" value="PDF generieren">
</form>
</div>
</div>
I was not able to reproduce this error with the code snippet thing even when I put my whole web page & css inside it. I guess it has something to do with the bootstrap columns. I use lg-2 here with a max width of 225px.
After I used the work-around (button instead of input) suggested in the answer I get the above. The button in IE is a bit smaller though it doesn't use up the max-width I defined. If anyone issues the same problem and has found a reason for that, I'd be glad to hear about it. For now, I'll live with the work-around.
I'll already had the issue myselfe that a text overflows a button in IE11.
For me it was a rendering bug connected to fonts.
IE11 seems to render the button on pageload, before webfonts are loaded, when the webfont is loaded the button is not redrawed so it does not adapt to the new width.
The only solution I was able to find is forcing the browser to redraw when webfonts are loaded. Therfore I used an JS called "FontFaceObserver" (https://github.com/bramstein/fontfaceobserver)
JS:
new FontFaceObserver('Roboto', {
style: 'normal',
weight: 400,
}).load(function(){
$('body').addClass('state-font-loaded');
}, 10000);
CSS:
.state-font-loaded {
visibility: visible; //forcing browser to redraw
}
An other try would be to change the input into button like
<button type="submit" class="button" name="btn_print">PDF generieren</button> this could solve sizing issues if they are connected to the input element. (Please also inpect this element to see if there is any fixed or precentage width set)
I have an asp button with certain style. but when i apply the same style to asp file upload control, only background change to that style. The browse button is still the same.
Asp code is
<div>
Please Select Excel File:
<asp:FileUpload ID="fileuploadExcel" runat="server" CssClass="addkey_btn" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" OnClientClick="showDivPageLoading();" CssClass="addkey_btn" />
</div>
CSS is
.addkey_btn {
background: none repeat scroll 0 0 #00B7CD;
border: 0 none;
color: #FFFFFF;
cursor: pointer;
font-family: 'Altis_Book';
font-size: 15px;
padding: 3px 15px;
}
I want to apply the same css to Browse button as in Upload button. Any suggestions?
EDIT1
Any pure CSS way of doing this?
It is very difficult to style input[type=file] reliably across browsers. The only cross-browser solution is the one demonstrated by #Vitorino, using label and/or pseudo-elements to hide the actual input and then style that element/pseudo-element instead.
This answer doesn't repeat that, but offers a pure CSS alternative which is browser dependent. That said, this should not be used in production websites, this is just a proof-of-concept or a demo.
Modern browsers are implementing somewhat non-standard extensions to enable user-styling of hitherto nigh-impossible element features. This allows developers to override default user-agent stylesheet to a large extent.
Custom-extensions:
Specifically, for input[type=file] at least Trident (for IE-10 and above) and Webkit (for Chrome, Safari) allow styling of this element to some extent without resorting to hacks like hidden elements, or absolutely positioned pseudo-elements. For this case, the vendor-specific extensions of our interest are:
-webkit-appearance (to enable override of user-agent style in Webkit-based browsers)
::-webkit-file-upload-button (to enable styling of the browse button in Webkit browsers)
::-ms-browse (to enable styling of the browse button in Trident-based browsers, i.e. IE)
::-ms-value (to enable styling of text input in Trident browsers, i.e. IE)
Caveats:
Unfortunately, there are no -moz- extensions for this in Gecko/Mozilla based browsers. Specifically, at least Firefox doesn't allow styling of the browse button at all.
IE does not allow changing the position of the browse button from right to left. Has to be further verified, perhaps it is using -ms-flex to control that?
Demo:
Example Fiddle: http://jsfiddle.net/abhitalks/hxv19bbg/7/
Example Snippet:
The following snippet will work perfectly in IE-10/11 and Chrome-39 (that is what I tested against), but will not work with Firefox.
* { box-sizing: border-box; margin: 0; padding: 0; }
div { margin: 8px; }
input[type=file], input[type=file] + input {
display: inline-block;
background-color: #eee;
border: 1px solid gray;
font-size: 15px; padding: 4px;
}
input[type=file] + input {
padding: 13px;
background-color: #00b7cd;
}
::-webkit-file-upload-button {
-webkit-appearance: none;
background-color: #00b7cd;
border: 1px solid gray;
font-size: 15px; padding: 8px;
}
::-ms-browse {
background-color: #00b7cd;
border: 1px solid gray;
font-size: 15px; padding: 8px;
}
input[type=file]::-ms-value { border: none; }
<div>
<label>Select File: </label>
<input id="browse" type="file" />
<input class="btn" type="button" value="Submit" />
</div>
you can style label and place it on top of choose file button
.btn,
label.choose:before {
background: none repeat scroll 0 0 #00B7CD;
border: 0 none;
color: #FFFFFF;
cursor: pointer;
font-family: 'Altis_Book';
font-size: 15px;
padding: 3px 15px;
}
label.choose:before {
content: 'Choose file';
padding: 3px 6px;
position: absolute;
}
<div>
<label class="choose">
<input id="browse" type="file" />
</label>
<input class="btn" type="button" value="Submit" />
</div>
I am trying to get the following to display the word "Search" with a border underneath the text itself (not the input window). I attempted to use the CSS placeholder as found here How do I Add border to text in inputfield, but it will not work. Here is my input box (it is a search box for wordpress):
<input id="search" name="s" type="text" onfocus="if(this.value=='Search') this.value='';" onblur="if(this.value=='') this.value='Search';" value="Search" />
I would be much obliged to whomever can give me a fix. I know that it is because I have onfocus= and onblur= instead of just placeholder=, but can't seem to figure it out.
Here is my fiddle http://jsfiddle.net/6Gevu/14/
put a css line: text-decoration: underline; when it says 'search' and remove that style when it's something else. Maybe by adding and removing a class (.underline) to the input field.
You can make use of the :after pseudo-element to generate a border, like so: http://jsfiddle.net/RMJWH/
.search-border {
position: relative;
display: inline-block;
}
.search-border:after {
content: ".";
color: transparent;
position: absolute;
bottom: 5px;
left: 2px;
width: 238px;
border-bottom: 2px solid #000000;
}
You could enclose your input box into a div and style that div to look like your input box. Then force the input box to to only show the bottom border.
<div class="input-box"><input type="text" /></div>
.input-box
{
/*your styles here*/
}
input
{
border:0;
border-bottom:/*some value*/
}
I want to customize (want change background and color etc) the browse button in upload file field.
<input type="file" tabindex="6" class="medium" size="20" value="" id="input_5_13" name="input_13">
You can't. You have to create your own button and trigger the actual input.
Here you can do this using jQuery. See working example.
HTML:
<input type="file" class="hidden" id="uploadFile"/>
<div class="button" id="uploadTrigger">Upload File</div>
jQuery:
$("#uploadTrigger").click(function(){
$("#uploadFile").click();
});
CSS:
.hidden {
display:none;
}
.button {
border: 1px solid #333;
padding: 10px;
margin: 5px;
background: #777;
color: #fff;
width:75px;
}
.button:hover {
background: #333;
cursor: pointer;
}
The basic premise behind styling file input buttons is to overlay absolutely positioned controls over the file upload. The file uploads opacity is set to 0, causing it not to show. Its z-index is set above the overlaid controls, while the z-index of the controls is set lower than the file upload. So when the user thinks they are clicking the overlaid controls they are actually clicking the file upload with opacity set to 0.
Here is a really rough example:
HTML
<div id="file-upload-cont">
<input id="original" type="file"/>
<div id="my-button">Find</div>
<input id="overlay"/>
</div>
CSS
#my-button{
position: absolute;
border: 1px solid black;
background: green;
padding 3px;
width: 50px;
height: 25px;
text-align: center;
left: 148px; /* Positioning over file-upload */
top: 0px;
z-index: 1; /* Lower z-index causes controls to sit under file upload */
}
#overlay{
position: absolute;
z-index: 1; /* Lower z-index causes controls to sit under file upload */
left: 0; /* Positioning over file-upload */
}
#original{
opacity: 0; /* Opacity makes it invisible*/
position: relative;
z-index: 100; /* z-index causes original file upload to sit above other controls*/
}
#file-upload-cont{
position: relative;
}
Working Example http://jsfiddle.net/tP8KY/1/
you cannot directly customize the browse button. your CSS won't work upon it.
What you can do is, you can create a button of yours with a textbox to the left of it. customize it, and upon click, trigger the original file upload.
see this link and this
Check the following for the changes in browse button:
Browse button css
Browse button design
Hope these links will help you.
In Google Chrome, radio buttons show a unwanted white background around the circle. This is not shown in Firefox as intended.
Please check these images.
And her is the direct link of the page having the issue (check in Firefox and Chrome)
https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4
Any CSS tricks that I can apply for Chrome?
this is a known Bug in Chrome which does not have real workarounds.
The only option I see and use at this point of time is to use a sprite sheet with images of the check boxes. I made a fiddle to show it to you with some random sprite I found on the internet:
Workaround
HTML:
<div id="show">
<input type="radio" id="r1" name="rr" />
<label for="r1"><span></span>Radio Button 1</label>
<p />
<input type="radio" id="r2" name="rr" />
<label for="r2"><span></span>Radio Button 2</label>
</div>
CSS:
div#show {
width:100%;
height: 100%;
background:black;
margin: 10px;
padding: 10px;
}
input[type="radio"] {
/* Uncomment this to only see the working radio button */
/* display:none; */
}
input[type="radio"] + label {
color:#f2f2f2;
font-family:Arial, sans-serif;
font-size:14px;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -38px top no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -57px top no-repeat;
}
You could create your own sprite with radio buttons in your desired design...
Hope that helps, if you have any more questions, let me know.
-Hannes
Wrap the radio element in a div, and set that div's overflow to hidden, and border-radius to 100px. Then set the radio input to display block, and no margin. This worked for me:
Markup:
<div class="radio_contain">
<input type="radio" id="r1" name="r1">
</div>
CSS:
.radio_contain {
display: inline-block;
border-radius: 100px;
overflow: hidden;
padding: 0;
}
.radio_contain input[type="radio"] {
display: block;
margin: 0;
}
I know this is an old thread, but I had this same problem and it took me a while to figure it out, so I'm posting this if someone else has the same problem.
I figured it out quite accidentally really. I was looking at something else and zoomed in on page using ctrl and scroll, and saw that radio button didn't have white background any more (and looked better). So I just put:
zoom: 0.999;
in right css class and that fixed it for me.