I tried to style a select. It is working more or less in all browsers except in IE and Chrome. The big question for me is why isn't it working in Chrome 25?
On the left side you can see how it should look like and on the right side how it looks like in Chrome.
HTML:
<div class="selectContainer">
<select name="adults" class="select-style" size="1">
<?php
for ($i=1; $i<=99; $i++){
echo '<option>' . $i . '</option>';
}
?>
</select>
</div>
<div class="selectDescription">
<span class="annotation">Erwachsene</span>
</div>
CSS:
.selectContainer {
background-image: url('../img/select-style.png');
background-repeat: no-repeat;
border-bottom: 1px solid #006633;
border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
-webkit-border-radius: 0px 0px 8px 8px;
width: 36px;
overflow: hidden;
float: left;
}
.select-style {
width: 57px;
height: 27px;
border: none;
background: none;
padding-top: 5px;
color: #95C11F;
}
.selectDescription {
line-height: 27px;
float: left;
padding-left: 5px;
}
Live example:
http://bfb.bplaced.net/test/
Add -webkit-appearance: none; to the .select-style class and it works in chrome ..
Seems like webkit is a little stricter with styling the <select> element ..
Also don't forget to add this if you don't want Chrome/Firefox's default orange border on focus:
:focus { outline-style: none; }
::-moz-focus-inner { border-style: none; }
Fiddle
Related
Check boxes are working fine in chrome but not in internet explorer.
Here is my HTML code:
<div class="patient-div-w" style="width: 9.5vw;">
<input type="checkbox" id="edema" class="input-checkbox-l">
<label class="label-n" for="edema" style="line-height: 8vh;">Edema</label>
<br>
</div>
Here is my CSS code:
input[type="checkbox"] {
opacity: 0;
margin: 0px 3px 0px 0px;
}
.input-checkbox-l[type="checkbox"] + label {
background-image: url(../images/unchk.png);
background-size: 1.2vw;
background-repeat: no-repeat;
padding-left: 1.7vw;
background-position: 0vh 0vw;
width: 8vw;
margin: 0vw;
position: relative;
top: -.1vh;
left: -1.6vw;
white-space: nowrap;
font-family: "Roboto Regular";
}
.label-n {
font-size: 1vw;
color: #000;
}
The same is the problem with radio buttons.
Any kind of help is highly appreciated.
Try this:
Lets assume the parent of .patient-div-w is .parent-div. So we need to do the following:
.parent-div{
overflow: auto;
zoom: 1;
}
This is a very common issue. You can read more about it here
Try this
In your code
<label class="label-n" for="edema" style="line-height: 8vh;">Edema</label> Just remove inline style="line-height:8vh;. it will work.
you can use below code as a reference and it will work IE, FF, Chrome
.input-checkbox-l[type="checkbox"] + label {
box-sizing:border-box;
padding:0px 20px 0px 55px;
background:url(https://i.stack.imgur.com/EAkMC.png) no-repeat center left 5px;
background-size: 30px;
font-size:22px;
margin-right:5px;
display:inline-block;
}
You can try without image
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid #ccc;
cursor: pointer;
outline: none;
}
input[type="checkbox"]:checked {
border:1px solid blue;
outline: none;
}
div{
display: inline-block;
}
div span{
vertical-align: super;
}
HTML
<div>
<input type="checkbox" name="" value="1"><span>Label name</span>
</div>
Please have a view at this image:
As from the image you can see that I have entered text in the input box but as I also have a button placed in that box so the text is getting hidden below the box.
Is there any way to prevent that, the button should also be on that place and the text should not hide instead it shoud be focused if further text is being typed.
Html code is:
<div class="form">
<input type="text" placeholder="Subscribe & Get Notified" id="email_inp">
<button style="outline: none;" class="btn-1 span btn-4 btn-4a icon-arrow-right" id="email_btn"><span></span></button>
</div>
The css code is:
#media only screen and (max-width: 768px)
{
input[type="text"]
{
font-family: "titillium_webregular", Arial, sans-serif;
border: none;
-webkit-border-radius: 3px 33px 33px 3px;
border-radius: 10px 33px 33px 10px;
color: rgba(85, 85, 85, 0.85);
font-size: 1.1em;
display: inline;
padding: 19.7px 13px;
background: #f5f5f5;
outline: none;
width: 93%;
box-shadow: 0px 11px 34px #111;
vertical-align: middle;
}
.btn-1
{
cursor: pointer;
padding: 29px 29px;
display: inline-block;
position: relative;
vertical-align: middle;
margin-left: -67px;
text-indent: -9999px;
margin-top: 1px;
outline: none;
width: 20px;
height: 14px;
border:none;
}
}
Any helps appreciated. Thanks in advance.
Try this.. You can see a space right to the textbox. I have added padding right to the textbox
$(function(){
$('#tbcss').val('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
});
#tbcss
{
padding-right: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" id="tbcss"/>
In my opinion, you should use your styling in a bit different way and use .form CSS selector too. You can use flexbox for example:
.form {
// NEW:
display: flex;
justify-content: space-between;
// Your old input CSS:
-webkit-border-radius: 3px 33px 33px 3px;
border-radius: 10px 33px 33px 10px;
background: #f5f5f5;
box-shadow: 0px 11px 34px #111;
width: 93%;
}
input[type="text"] {
// NEW:
width: 100%;
// Your old without unnecessary CSS:
font-family: "titillium_webregular", Arial, sans-serif;
color: rgba(85, 85, 85, 0.85);
border: none;
font-size: 1.1em;
padding: 19.7px 13px;
outline: none;
vertical-align: middle;
}
.btn-1 {
// NEW
align-self: flex-end;
// Your old without unnecessary CSS:
cursor: pointer;
padding: 29px 29px;
text-indent: -9999px;
margin-top: 1px;
outline: none;
width: 20px;
height: 14px;
border:none;
}
Add webkit CSS properties in case you need support in older browsers.
If you wish to prevent the image from hiding the text, then all you need to do is increase the padding-right property on the input textfield.
Maybe try a value of 40px or even more until you're satisfied with the result, then the caret should never go below the button.
Just add this:
input[type="text"]
{
padding-right:5%;
}
In this case all u need to do is add "padding-right: 50 px;" to the input text box class(50 is just a number u can increase or decrease that according to your need)
I have an issue with the positioning of a textbox and button, where it doesn't display correctly under Chrome.
Here is an example from each browser, as you can see the textbox under Chrome is pushed out of position.
Internet Explorer/Firefox
Chrome
html:
<div id="divSearch">
<input type="text" id="txtSearch" placeholder=" Search..."/>
<input type="submit" id="btnSearch" value=""/>
</div>`
css:
input[type=text]{
width: 200px;
height: 24px;
border: none;
border-radius: 3px 0px 0px 3px;
-webkit-border-radius: 3px 0px 0px 3px;
-webkit-appearance: none;
-moz-appearance: none;
padding: 0;
}
input[type="submit"]{
border: none;
border-radius: 0px 3px 3px 0px;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-border-radius: 0px 3px 3px 0px;
width: 32px;
height: 24px;
background: url(../img/search_button.png) no-repeat;
background-color: white;
background-position: 10px 5px;
}
#divSearch{
float: right;
width: 300px;
height: 40px;
white-space: nowrap;
margin-right: 50px;
}
Now if I remove the height from input[type="submit"] the positioning is fine except the button is now the wrong size.
I can't work out why the height of the button causes the issue. Any advice on how to fix it?
Thanks
Add the following code. It should work:
input[type=text]{
float:left
}
Make the button value non-empty will resolve this.
<input type="submit" id="btnSearch" value=" "/>
The root cause is the button has no text baseline.
I'm a fairly new coder, so I hope this question makes sense.
I am building a website and currently working on the Navigation bar.
As I am building the search bar, using a sprite image I have come across a problem when viewing the site live in different browsers.
the search button image renders differently on safari compared to firefox, chrome, IE and Opera.
<hgroup>
<form id=header-search>
<input class=searchbox placeholder="Search Spout TV"><input type=submit class=button value=""/>
</form>
<p class=login>LogIn<p class=arrow-down></p></p>
<p class=line>|</p>
<p class=signup>Sign Up</p>
</hgroup>
this is the CSS3 code for it:
#header-search {
overflow: visible;
}
input.searchbox {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background-color: #af5354;
border: 1px solid #af5354;
border-radius: 5px;
color: #fff;
float: left;
height: 19px;
margin-left: 0.5em;
margin-top: 0.2em;
outline: 0 none;
padding-left: 0.5em;
padding-top: 0.3em;
text-align: left;
width: 220px;
}
input.searchbox {
margin-top: 00.3em;
}
input.searchbox:focus {
background: #e87476;
background: -moz-linear-gradient(top, #e87476 0%, #e87476 20%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e87476), color-stop(20%, #e87476));
outline: 0;
color: #FFF;
}
*::-webkit-input-placeholder {
color: #FFF;
}
*:-moz-placeholder {
color: #FFF;
}
*::-moz-placeholder {
color: #FFF;
}
*:-ms-input-placeholder {
color: #FFF;
}
#header-search input.button {
border: 0;
padding: 0;
margin: 2px 0 0 -36px;
width: 38px;
height: 30px;
float: left;
border: none;
background: url("../../assets/images/sprite.png") -142px -7px;
overflow: hidden;
}
#header-search input.button:hover {
border: 0;
padding: 0;
margin: 2px 0 0 -36px;
width: 38px;
height: 30px;
background: url("../../assets/images/sprite.png") -142px -47px;
float: left;
border: none;
}
Any help would be appreciated.
thank you.
The view of html elements is different in each web browser and it's all because each web browser may have different engine. If you would like to have similar display on each web browser maybe you should try use boostrap?
1.You can download it from: http://getbootstrap.com/
2.Next you have to put the file bootstrap.min.css in the location where is your index.html
3.Next include the command
<link type="text/css" rel="stylesheet" href="bootstrap.min.css" />
between
<head></head>
markers.
The second case- If You use html5 and css3 You don't need to use
-webkit-border-radius:
Just use:
border-radius:
For all(actual versions) web browsers it should be ok.
Or maybe I don’t understand your question.. hmm?
Hey guys I'm making a new layout for my community and now I'm slicing him into pieces. Their is only 1 problem I designed a textfield where the user can search but there are 2 links right after the textfield. I don't know how to let them stick together. I've tried something and it actually works in google chrome, but in it doesn't.
.searchbox {
background: url('../images/searchbox.gif') no-repeat;
border: 0px;
height: 24px;
width: 308px;
font-size: 11px;
padding: 1px -15px 0px 10px;
}
.options {
background: url('../images/options_active.gif') repeat-x;
background: url('../images/options.gif') repeat-x;
font-size: 10px;
padding: 6px;
margin: 0 0 0 -10px;
color: #6b6b6b;
}
.options:active {
background: url('../images/options_active.gif') repeat-x;
color: #000;
}
.button {
background: url('../images/button_bg_active.gif') repeat-x;
background: url('../images/button_bg.gif') repeat-x;
color: #fff;
font-weight: bold;
font-size: 11px;
padding: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
}
.button:active {
background: url('../images/button_bg_active.gif') repeat-x;
}
this is what I've got in my css file
this is my html file:
<div id="topbar">
<form method="post" action="">
<input type="text" class="searchbox" name="searchbox" value="Zoek events, nieuws, dj's, foto's en veel meer..." />
Advanced options
Zoeken!
</form>
</div>
Here is what it looks in firefox:
alt text http://img411.imageshack.us/img411/8282/searchj.png
and this is what it looks in chrome:
alt text http://img22.imageshack.us/img22/2655/searchchrome.png
To start with you might also want to use -webkit-border-top-left-radius: 5px and -webkit-border-bottom-left-radius: 5px to get that same effect with Chrome and Safari.
I would do something like the following:
.form {
position: relative; /* Alows you to absolutely position child elements */
}
.searchbox {
float: left;
position: absolute;
}
.options, .button {
float: right;
position: absolute;
}
.options {
right: -30px; /* Width of the button to its right */
}