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;
Related
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
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.
My code: https://jsfiddle.net/k0hqzcwg/
I'm not understanding why the message button is moving outside of the parent div. I've tried clearing floats both with adding clear: both, and adding a clearfix class but have not gotten any results.
In summary, I am trying to start a competing video sharing service with Youtube, my immense skill in CSS and Html are sure to pull through and give me the one up. Sarcasm
Any tips are welcome, I know I have a lot to learn.
For those who dont want to click the link:
Html:
<body>
<div id="headingbarholder">
<div id="headingbar">
<div id="heading-submit-avatarholder">
<div id="headingmessagebutton">
<span id="messagebuttoncontent" style = text-align: middle;>Message</span>
</div>
<div id="headingavatar">
<img id="heading-avatar" src="Removed Link" width = 45px; height = 45px;></img>
</div>
</div>
<img id="logo" src="Remove Link" width = 45px; height = 45px; display = inline-block;></img>
</div>
</div>
</body>
Css:
body {
color: White
font-size: 11px;
font-family: arial,sans-serif;
line-height: 15px;
background-color: #F1F1F1;
margin: 0 -8px 0 -8px;
}
#headingbarholder{
position:fixed;
left:0;
width: 100%;
}
#headingbar{
position: relative;
background-color: #fff;
padding:7px 30px 8px 30px;
border-bottom: 1px solid #E8E8E8;
}
#heading-submit-avatarholder{
float: right;
right: 0px;
width: 160px;
}
#headingmessagebutton {
background-color: #F8F8F8;
color: #333;
font-weight: bold;
font-size: 11px;
height: 28px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
border: 1px solid #D3D3D3;
border-radius: 2px;
display:inline-block;
padding: 0px 13px;
box-sizing: border-box;
line-height:normal;
}
#headingavatar{
width: 45px;
height: 45px;
display:inline-block;
}
Float the button left.
Here:
#headingmessagebutton {
background-color: #F8F8F8;
color: #333;
font-weight: bold;
font-size: 11px;
float: left;
height: 28px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
border: 1px solid #D3D3D3;
border-radius: 2px;
display: inline-block;
padding: 0px 13px;
box-sizing: border-box;
line-height: normal;
}
I would use a button instead and float it: Fiddle
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.