I got problem with <select> element on Firefox, It should list an option as text wrap like Google Chrome or Safari
here is my CSS(SASS) code
select.form-control.bare-select{
#include appearance(none);
margin: 6px 0 10px;
padding: 8px 24px 8px 12px;
border: 1px solid $grey;
border-radius: 4px;
background: $white url(/img/hero-select-caret.png) right center no-repeat;
white-space: pre-line;
word-wrap: break-word;
background-size: 23px 50px;
height: auto;
color: $black;
cursor: pointer;
font-size: 14px;
line-height: 1.6;
&:hover {
color: darken($dark-blue, 10%);
}
}
CodePen here: https://codepen.io/anon/pen/xYVKoY
Related
I had a email textbox with default,success,error css class.
<input id="emailInput" class="sansserif inputuser" style=" margin-top: 5px;" type="text" placeholder="Enter Email.."/>
.default{
width: 306px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
color: #737373;
font-weight: 600;
background-color: white;
background-image: url('../Styles/Icons/User Male-35.png');
background-position: 5px 5px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
.error{
width: 306px;
box-sizing: border-box;
border: 2px solid #ff0000;
border-radius: 4px;
font-size: 16px;
color: #737373;
font-weight: 600;
background-color: white;
background-image: url('../Styles/Icons/User Male-35.png');
background-position: 5px 5px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
.success{
width: 306px;
box-sizing: border-box;
border: 2px solid #00b33c;
border-radius: 4px;
font-size: 16px;
color: #737373;
font-weight: 600;
background-color: white;
background-image: url('../Styles/Icons/User Male-35.png');
background-position: 5px 5px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
here i'm applying following css classes default ,error and success while validating email text box but only difference from the above three classes is border property only .how to reduce the redundant css properties is there any better way to achieve this.
You can define similar css at one place with joining multiple selectors and overriding later if necessary:
Note: The styles that you are overriding i.e for .error and .success must come after the generic styles otherwise they will be overridden by default styles and you won't see any change.
.default,
.error,
.success {
width: 306px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
color: #737373;
font-weight: 600;
background-color: white;
background-image: url('../Styles/Icons/User Male-35.png');
background-position: 5px 5px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
.error {
border-color: #ff0000;
}
.success {
border-color: #00b33c;
}
I am trying to stylise a menu using CSS and I am having an issue with the text-shadow effect clipping inside the dropdown. The text itself seems to be clipping inside the select borders, which is surprising because I would have thought that it would be allowed to spread into the padded area.
html,
body {
font-family: Calibri;
margin: 0px;
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
cursor: default;
}
#dropdown_user_select{
position: absolute;
left: 25px;
top: 25px;
}
select {
background: none;
border: 1px solid;
border-radius: 2px;
box-shadow: 0px 0px 8px 0px #555, 0px 0px 25px 0px #555 inset;
text-shadow: 0px 0px 10px #555;
text-align: center;
transition: 0.4s all ease-out;
font-size: 25px;
padding: 10px 10px 10px 30px;
cursor: auto;
-webkit-appearance: none;
background: #DDD;
overflow: visible;
}
.cutoff {
overflow: visible;
}
#arrow_down {
/* a customised arrow on the left of the dropdown */
border-width: 15px 10px 0px 10px;
border-color: #000 transparent transparent transparent;
position: absolute;
left: 30px;
top: 45px;
}
<div class="cutoff">
<select id="dropdown_user_select">
<option value="ADMIN">ADMIN</option>
<option value="username">username</option>
</select>
</div>
<div id="arrow_down" class="arrow_pointer"></div>
as you can see, I have tried to use a div with the overflow: visible to fix this but it has not worked.
EDIT
By clipping, I mean the text-shadow is cut off inside of the tag. Here is an example that shows this better than the above:
html,
body {
font-family: Calibri;
margin: 0px;
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
}
#dropdown_user_select{
position: absolute;
left: 25px;
top: 25px;
}
select {
border: 1px solid;
border-radius: 2px;
text-shadow: 0px 0px 10px #F00;
font-size: 25px;
padding: 10px 10px 10px 30px;
-webkit-appearance: none;
background: #FFF;
overflow: visible;
}
<select id="dropdown_user_select">
<option value="ADMIN">ADMIN</option>
<option value="username">username</option>
</select>
The issue is probably that the <option> tag cannot have a padding itself, and the one set on the select actually pushes the left edge of the options, cutting off the shadow.
By using some trickery it seems to work on Chrome, it's not tested on other browsers although I assume it's fine.
The text-indent fixes the left shadow, while the line-height fixes the vertical shadows.
select {
border: 1px solid;
border-radius: 2px;
text-shadow: 0px 0px 20px #F00; /* increased to test vertical cut */
text-indent: 20px; /* fix the left shadow */
line-height: 40px; /* fix the top/bottom shadows */
font-size: 25px;
padding: 10px 10px 10px 0; /* removed left padding to compensate with indent */
-webkit-appearance: none;
background: #FFF;
overflow: visible;
}
<select id="dropdown_user_select">
<option value="ADMIN">ADMIN</option>
<option value="username">username</option>
</select>
It is hard to figure out what exactly you're trying to accomplish, but if I read correctly, the text inside is clipping outside of the borders for you. Also, I wasn't sure what you meant by the shadows... here's a JSfiddle:
html, body {
font-family: Calibri;
margin: 0px;
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
cursor: default;
}
#dropdown_user_select{
position: absolute;
left: 25px;
top: 25px;
}
select {
background: none;
border: 1px solid;
border-radius: 2px;
box-shadow: 0px 0px 8px 0px #555, 0px 0px 25px 0px #555;
text-shadow: 0px 0px 10px #555;
text-align: center;
transition: 0.4s all ease-out;
font-size: 25px;
padding: 10px 15px 10px 25px;
cursor: auto;
-webkit-appearance: none;
background: #DDD;
overflow: visible;
}
.cutoff {
overflow: hidden;
}
#arrow_down {
/* a customised arrow on the left of the dropdown */
border-width: 15px 10px 0px 10px;
border-color: #000 transparent transparent transparent;
position: absolute;
left: 30px;
top: 45px;
}
<div class="cutoff">
<select id="dropdown_user_select">
<option value="ADMIN">ADMIN</option>
<option value="username">username</option>
</select>
</div>
<div id="arrow_down" class="arrow_pointer"></div>
I edited the overflow value in .cutoff and took away inset from your box shadow in select. I also edited your padding values to accommodate for the width of the down arrow. Not sure if that was what was happening, but I hope I helped.
If it's not what happened, please explain to me what did happen so I can try to help.
HTML code:
<div class="col-lg-7 col-md-7 col-sm-7">
<select class="tblselect2 ">
<option value="">Item 1</option>
<option value="">Item 1</option>
</select>
</div>
I am using this CSS for formatting the select option.
.tblselect2 {
background: url("../images/arrow1.png") no-repeat scroll right center white;
font-size: 12px;
height: 18px;
line-height: 1.5;
margin-bottom: 0px;
padding: 2px 0 17px 0;
line-height: 1.5;
border: 1px solid #d9d9d9;
border-radius: 4px;
color: #555555;
width: 64%;
}
When I am using this css the selected value does not come into the select box. I need to add this css however, for formatting the select button. I need to add a image for right drop down.
It is hiding because of the height and padding you have used in your CSS. Update your CSS like below.
.tblselect2 {
background: url("../images/arrow1.png") no-repeat scroll right center white;
font-size: 12px;
height: 24px;
line-height: 1.5;
margin-bottom: 0px;
padding: 2px 0 4px 0;
line-height: 1.5;
border: 1px solid #d9d9d9;
border-radius: 4px;
color: #555555;
width: 64%;
}
EDIT:
If you want hide the original arrow of selectbox use the following CSS. But this solution will work onlly IE10+ browsers, chrome. IE older browser it wont work.
.tblselect2 {
background: url("http://www.fifa.com/imgml/icons/events/arrow_Down_Red.gif") no-repeat 99% 5px white;
font-size: 12px;
height: 24px;
line-height: 1.5;
margin-bottom: 0px;
padding: 2px 0px 4px 0;
line-height: 1.5;
border: 1px solid #d9d9d9;
border-radius: 4px;
color: #555555;
width: 64%;
appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none;
}
.col-lg-7 select::-ms-expand{
display: none;
}
FIDDLE DEMO
Adjust Following line in your css code and give height
padding: 2px 0 10px 0;
height:30px;
http://jsfiddle.net/58KmZ/2/
remove padding from your css code
padding:
You should increase the height and decrease the padding-bottom. If you change, it will be shown.
height: 25px;
padding: 2px 0px 5px 0px;
I'm having trouble aligning a regular <button> beside an input in Firefox. I get the following output in Firefox:
The input class is university and the button class is next and the CSS code is the following:
.university {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-transform: uppercase;
padding: 20px;
width: 400px;
display: block;
border: none;
color: #000;
border-radius: 3px 0px 0px 3px;
-moz-border-radius: 3px 0px 0px 3px;
-webkit-border-radius: 3px 0px 0px 3px;
outline-style: none;
outline-width: 0px;
outline-color: #000;
}
#next {
background-color: #C44D58;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-transform: uppercase;
width: 150px;
padding: 20px;
margin: 0;
color: #FFF;
border: none;
border-radius: 0px 3px 3px 0px;
-moz-border-radius: 0px 3px 3px 0px;
-webkit-border-radius: 0px 3px 3px 0px;
outline-style: none;
outline-width: 0px;
outline-color: #000;
}
And the HTML is:
<div class="universityContainer">
<input type="text" class="university typeahead" placeholder="University Name">
<button id="next">NEXT</button>
</div>
The CSS for .universityContainer is:
.universityContainer {
display: table-cell;
vertical-align: middle;
}
Note: It should be noted that it renders correctly in every browser except for Firefox.
Remove display: block from the .university. Fiddle: http://jsfiddle.net/gf9Tr/
You can remove display: block; or you can use display: inline-block; in class university instead.
You need to change display:block on the input element to display: inline-block.
Here is a jsbin to show them lining up correctly.
I have some CSS that works well in Chrome, FireFox, and IE, but looks very strange in Opera.
Link to the fiddle
Also, I took screenshots:
This what happens on just forgot link hover:
This happens on form focus (complete disaster):
Normal look in Chrome:
Submit button on focus loses it's border color (why in hell?!)
Some mess on focus, I can't explain, just take a look on second pic
I tested on the latest version of Opera. What the hell is wrong with this browser? Even IE8 shows everything as I expect it.
CSS:
.sign_in {
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -255px;
background: #ffffff;
width: 510px ;
height: 240px;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
z-index: 9999999;
font-size: 14px;
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
}
.signs_form{
border-right-style: solid;
border-color: rgba(80, 140, 255, 0.83);
border-width: 1px;
margin-top: 40px;
vertical-align: 100%;
margin-left: 50px;
padding-right: 50px;
font-weight: 500;
display: inline-block;
}
input#email{
border-style: solid;
border-color: #378de5;
border-width: 1px;
padding: 3px 3px 3px 3px;
font-size: 14px;
outline: none;
font-style: normal;
font-weight: 400;
}
input#email:focus{
border-color: rgba(2, 22, 222, 0.97);
}
input#password{
border-style: solid;
border-color: #378de5;
border-width: 1px;
padding: 3px 3px 3px 3px;
font-size: 14px;
outline: none;
font-style: normal;
font-weight: 400;
}
input#password:focus{
border-color: rgba(2, 22, 222, 0.97);
}
.sign_in_submit {
margin-top: 0;
border: solid 1px #378de5;;
background-color: #ffffff;
color: #378de5;
padding: 2px 5px 2px 5px ;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 16px;
font-weight: 500;
}
.sign_in_submit:hover {
cursor: pointer;
border-color: rgba(2, 22, 222, 0.97);
color: rgba(2, 22, 222, 0.97);
}
#close {
float: right;
padding-left:-10px;
padding-top: -10px;
margin-right: 5px;
}
#close_sign_in_popup {
text-decoration: none;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 20px;
color: #d61354;
}
#close_sign_in_popup:hover {
color: #fc145f;
}
.forgot_pass{
display: block;
margin-top: 5px;
margin-bottom: 0;
margin-left: 2px;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
color: #378de5;
font-size: 13px;
font-weight: 400;
text-decoration: none;
}
.forgot_pass:hover{
height: 100%;
text-decoration: underline;
}
Forked http://jsfiddle.net/w29WQ/1/
.sign_in {
/*top: 50%; // so it seems the positioning gets all funky in opera
left: 50%;*/
margin-top: 0;
margin-left: 0;
/* Your other styles for this element */
}
Anyhow, seems your fixed positioning was causing errors, I simply commented out the top and left positioning in the containing div, and reset the margins to keep the element displayed.
Ok, guys.
1) Shifts in form
The reason is that Opera strongly dislikes inline-block as form property, which is quite logical, actually, but all other browser undertand this and it is convinient
2) Loosing border-color of submit button on field focus
But here - Opera bug, can be fixed by placing before real tag invisible copy - so it is like bait to this Opera bug.