I've a select box with some options, I need to apply styles specific to select control option.
Styles I want apply are :
color: #333333;
font-size: 14px;
min-height: 2em;
padding: 0px 16px 0px 16px;
margin-top: 0.125em;
cursor: pointer;
I've given class .taskpanel-select-control to my select control,
and added css
.taskpanel-select-control option{
color: #333333;
font-size: 14px;
min-height: 2em;
padding: 0px 16px 0px 16px;
margin-top: 0.125em;
cursor: pointer;
}
Css for my select control is:
border-radius: 3px;border: 1px solid #757575;-webkit-appearance:none; -moz-appearance:none; appearance: none; background: url(images/caret_down.svg) no-repeat;background-repeat: no-repeat;background-size:1em;background-position: 96%;min-width: 5em;height: 1.75em;padding-left: 0.5em;padding-right: 2em;
But these are not respected in the select options, is there any way to make this happen.
Image of Select Box
I figured out solution for this issue.
Applying css styles for select options is not possible in chrome, where as it is possible in firefox.
To make it work in both firefox and chrome I constructed select or drop down using ul and li.
Through which I could able to apply whatever styles I wanted to my select options which are nothing but list items (li).
Found one issue with this approach, auto suggestion are not coming in my constructed drop down where as it is by default behavior of normal html select box.
It should be as straightforward to apply styles to your <options> as to any other element:
.taskpanel-select-control option {
color: #333333;
font-size: 14px;
min-height: 2em;
padding: 0px 16px 0px 16px;
margin-top: 0.125em;
cursor: pointer;
}
p {
font-weight: bold;
}
<p><select> containing unstyled <option> elements:</p>
<select>
<option>Registration</option>
<option>Completion</option>
<option>State</option>
<option>Archive</option>
</select>
<p><select> containing styled <option> elements:</p>
<select class="taskpanel-select-control">
<option>Registration</option>
<option>Completion</option>
<option>State</option>
<option>Archive</option>
</select>
Related
As shown in the picture I applied a border radius for the select tag but when pressing on it the arrow button isn't taking the border radius.
(Only in Opera browser)
css:
.App select{
font-family: "Nunito", sans-serif !important;
font-size: 22px !important;
padding: 0.25rem;
border-radius: 0.5rem;
border: #dc3545 solid 1px;
outline: none;
padding-left: 15px;
}
Is there any solution for this?
The outline shown is most likely the :focus state. I would keep this on for accessibility reasons; some people physically cannot use a mouse, or simply prefer to navigate a page via the keyboard.
Knowing this, you can toggle the focus state with CSS:
:focus {
outline: none;
}
The Solution is simple, just give in:
.App select:focus {
overflow: inline;
outline: none;
I have a problem with styling a textarea, i use bootstrap 4 css
i was trying to styling by my self but if i using a padding or margin it's make the textarea height to big
.comment-box {
padding: 0.8rem 1rem;
border-radius: 30px;
}
<textarea class="form-control comment-box" rows="1"></textarea>
i want this textarea look like input field with button in inside just like this image
textarea input
Here
is the complete explanation about overriding bootstrap style. I am sure you can follow that rule and solve that issue.
Edit:
Also you don't need to implement his first and second step. You can follow only 3 and create new style that override the bootstrap style
https://www.w3schools.com/howto/howto_css_contact_form.asp">here is a link to your answer
that should solve your issue, check out the css they use and play with it.
input[type="text"],
select,
textarea {
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 10px;
}
input[type="submit"] {
border: none;
background: #4aaaa5;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
color: #ffffff;
font-size: 16px;
}
Because it is just 1px I can't tell if it is the text box next to the button or the button itself. So I was going to take a screenshot and look at it with a measuring tool. From there I was going to look the firefox debugger and ie debugger to see what is off by 1px.
However I was hoping someone might have an idea to what is causing this.
Here is the offending element in ie ( 28 px )
Here is where it is correctly displayed in FF, Chrome, etc. ( 27 px )
http://www.arcmarks.com
Here is the CSS for the button:
#ue_but_new{
position: absolute;
padding: 8px 6px 7px 6px;
text-decoration: none;
cursor: pointer;
}
p.small_white{
font-size: 10px;
color: #ffffff;
}
.blue_but{
color: #ffffff;
border: 1px solid #057ed0;
background: -moz-linear-gradient(top, #31baed, #019ad2);
}
If you base element size on text size, it will always vary between different browsers, different systems, different settings, et.c.
Set a specific line height on the element instead of padding from the text height:
#ue_but_new{
position: absolute;
line-height: 25px;
padding: 0 6px;
text-decoration: none;
cursor: pointer;
}
You could try to apply border on the input & button wrapper, then set overflow:hidden.
This way, even if it's off by a pixel, it's not visible.
In HTML:
<div>
<input type="" />
<button></button>
</div>
In CSS (roughly):
div {
border:1px solid #ccc;
border-radius:3px;
background:#fff;
overflow:hidden;
}
input {
border:0;
background:transparent;
}
button {
background:blue;
}
div, input, button { height:22px; }
Prefer setting the line-height property to vertically center a single line of text rather than using padding-bottom and padding-top.
In your case font-size: 10px + padding-top: 8px + padding-bottom: 7px = line-height: 25px.
#ue_but_new {
position: absolute;
padding: 0 6px;
line-height: 25px;
text-decoration: none;
cursor: pointer;
}
Hi I want to change the style of the dropdown, nearer the option tags, in HTML. In Firefox it is working, but not properly in IE and google chrome.
The padding is only working in firefox. The background color is working on all browsers, but in IE you can see it, even on the selected value.
Demo with JSFiddle
Html:
<label for="locale">locale:<em>*</em></label>
<select name="locale" id="locale">
<option selected="selected">en_CA</option>
<option>en_US</option>
<option>fr_FR</option>
<option>fr_CA</option>
<option>ja_JP</option>
</select><br />
CSS:
label{
margin: 5px 0px 10px 0px;
padding: 5px;
height: 22px;
display: inline-block;
width: 100px;
}
label em{
color: red;
font-family: Arial;
font-weight: bold;
}
select{
color: #333;
margin: 5px 0px 10px -5px;
padding: 5px;
height: 32px;
width: 262px;
border: #999 1px solid;
}
select option {
padding: 5px 8px;
background: #ddd;
}
Webkit browsers (Safari, Chrome etc) don't allow padding on select elements. You can however mimic padding by manipulating the height for top and bottom padding and text-indent for left-padding.
Update: The same goes for background-color on option elements. Webkit doesn't allow that and I don't believe there's a workaround other than doing your own Javascript implementation of a drop-down using for example an unordered list and some styling.
I don't think you could just style the option tags. I think I read it from somewhere that it is based on OS or something...
I was trying to make a simple help button using "A" anchor tag. The thing is it works perfectly on Firefox, Chrome, OP, Safari. Now when I tried it on Internet Explorer 10, The text wasn't properly aligned in the middle. here is what I've done so far:
HTML
<a id="help-btn"><span>?</span></a>
CSS
#help-btn {
display: table;
margin-left: auto;
margin-right: auto;
border: solid 5px #2F2F2F;
width: 10em;
height: 10em;
text-align:center;
background: #c100ff;
text-decoration: none;
vertical-align: middle;
}
#help-btn span {
color: #22002D;
font: 10em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
line-height: 100%;
}
here is a jsfiddle sample. any help would be appreciated...
so I've finally found the solution after 3 hours of digging deep, as stupid as may it sounds but the extra space was being added by the font "bauhaus 93". It renders correctly on all browsers except IE (that's a shocker). So I had to change it to another font and now it works perfectly. so if anyone face the same problem please do check the font that you are using.
play with your line-height.
Try this :
#help-btn span {
color: #22002D;
font: 10em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
line-height: 10em; // CHANGE YOUR LINE-HEIGHT SIZE
}
if the problem not fixed, try add display:block; to your #help-btn span
You need to add the line-height attribute and that attribute must match the height of the div. In your case:
Try
#help-btn span {
color: #22002D;
font: 3em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
height: 3em;
line-height: 3em;
}