I was just wondering if it's possible to add padding to the select options in select dropdowns in the Twitter Boostrap framework. I've added padding to all my other inputs so the padding on my select options is out of line. I would expect something like...
option {
padding: 0 24px;
}
... to do the trick but this does nothing to a bootstrap select option.
Any help would be appreciated.
Edit:
Here's the jsFiddle:
http://jsfiddle.net/sbmw3egx/
I was able to get the text in the select to be adjusted to the left by setting the text-indent property:
select.form-control {
text-indent: 16px;
}
A bit more about the text-indent property here: http://www.w3schools.com/cssref/pr_text_text-indent.asp
Hope that helps!
Edit: It looks like Chrome/Safari uses text-indent, Firefox uses text-indent and padding-left, and IE makes use of padding-left for select. I'm not sure how you would specify the CSS to make it consistent across all of these browsers.
Assuming you're using the Bootstrap form-control, this first option displayed will take on the style of the form-control CSS class. So you'd need to override form-control too.
option {
padding: 0 24px;
}
select.form-control {
padding: 0 24px;
}
Demo: http://bootply.com/dCJM6I7z5V
This is one of those elements that is difficult to style. Normally I would try to just use simple css but in cases like this (if you really must style it) then I would use a plugin.
http://www.bartos.me/heapbox/ is one example.
Related
Buttons are large and going over the card width
This should be easy, but I'm having a bit of tough time customizing the buttons inside the cards. I want to remove all the padding, so that the black border nicely encompasses the icon without any extra space in the left/right-hand sides. I've tried adding custom css and !important and directly overriding the div.btn__content, but those don't work. Any ideas to do this as simply as possible?
Reproduction Link
The issue is the min-width of the .btn class. Setting that to 0 will allow the button to be smaller than 88px. You should also just set the padding of the .btn__content to 0.
div.btn__content {
padding: 0;
}
div.card__actions .btn {
min-width: 0;
}
Here's an updated codepen.
For newer versions of Vuetify (1.2.4 and above) you need to use this:
/* turn off min-width for all buttons */
.v-btn {
min-width: 0;
}
You need to change min-width of .btn class and set padding-left: 16px of .btn-content.
Here is an example:
https://codepen.io/anon/pen/zPEyLB
You might have to use ::v-deep
::v-deep .v-btn {
padding-left: 12px;
padding-right: 12px;
}
I am trying to create a css style that give the same result like native browser highlight so i can put in the css into tinymce.
but from the photo below you can see that the height of the custom css is too low, i tried a few method like using display:inline-block, it works fine for the height but it automatically remove the first and the last space.
Any expert please advise.
Do you mean something like this:
.highlight {
font-size: 14px;
display: inline-block;
color: #fff;
background-color: blue;
padding: .5em 0;
}
Here's a fiddle:
https://jsfiddle.net/c7rdekej/
Create a span around the text you want to highlight and assign a class to it
like highlight
And add css property like below
.highlight {
background:#008AE6;
color:#ffffff;
}
Check this fiddle for clarification http://jsfiddle.net/5u52qw57/
Let me know if it is helpful
Doesn't matter what I do, using Mac OSX 10.9.2 and Chrome Version 33.0.1750.152, padding, background-color, nothing works. I am really just wanting to apply a padding-top and padding-bottom of 5px on a select element, works everywhere cept Chrome on a MAC OSX. What gives? How to do this globally on all platforms??
You need to apply -webkit-appearance:none; when adding CSS to select elements in webkit browsers.
DEMO http://jsfiddle.net/XxkSC/3830/
There is better option to achieve a natural design:
height:30px;
background:#ffffff;
DEMO JSFiddle
p.s
Vector's answer is hiding the arrows on the right side.
Add the following property to your select in your css file:
-webkit-appearance:none;
If you are using bootstrap, you can add class custom-select:
<select class="form-control custom-select">
After adding it, you can eventually adjust height by adding line-height property to css:
select {
line-height: 1.3;
}
https://getbootstrap.com/docs/4.1/components/input-group/#custom-select
This solution is not only for select but also for input and textarea.
select,
textarea,
input {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
}
I also applied the solution for all browsers, so it should work the same way everywhere.
!important did the trick for me, but it will depend if you will need it or not.
I'm trying to port code over from using inline css to using a stylesheet and as I'm pretty much a total css noob I'm having trouble.
Most of the things I've moved over to external have worked fine, but I can't seem to get TD elements to use styles defined in the stylesheet. Here's an example:
<td class="text_right">...</td>
.text_right {
text-align: right;
}
Why doesn't that work?
That should work, however bear in mind that your <td> element should have some dimensions, otherwise it will be as wide as the content.
Check this for a demo
<td class="text_right"><a>...</a></td>
.text_right {
text-align: right;
width: 300px;
}
that should work , put you text in <a> tags
Try using !important . Like this ;
.text_right {
text-align: right !important;
}
if you still see it not aligned please check css for that element overridden rules (with chrome or opera) by right click and investigate
My first post here and unfortunately it won't be that exciting and I need an answer that includes IE6.
To get space between paragraphs, I'm styling my <p> tags like this:
div.content_cms p {
margin-top: 0px;
margin-bottom: 15px;
padding: 0px 15px 0px 0px;
}
The margin bottom to space the paragraphs. This of course works fine. But then I also need to style a link with html is this:
<p>Text </p>
When there is a link as in the example above, I don't want the margin-bottom to be applied. I tried to fix it with this:
div.content_cms p a {
margin-bottom: 0px !important;
}
Which of course doesn't work.
I'm adding a class to the <a> tags with jQuery so I can automatically add an icon to links. I tried adding
margin-bottom: 0px !important;
to the class I'm adding with jQuery but that didn't work either.
What's the best way to style spacing between <p>paragraphs</p> with text but not paragraphs with links?
Thank you.
You can easily do this with jQuery:
$('p').has('a').css('margin-bottom', 0);
Live demo: http://jsfiddle.net/NyjvT/
If you need to set multiple styles, then consider this:
$('p').has('a').addClass('whatever');
CSS:
p.whatever { margin-botttom:0; font-size:20px; ... }
I don't think you can.
Your best bet is to add a class to those particular <p> elements, and override the margin on those:
div.content_cms p.nomargin {
margin-bottom: 0px;
}
<p class="nomargin">Text</p>
If this is not possible on the server side, you could do some jQuery hackery to take care of it.
Maybe there's some CSS3 magic that could be used, but I'm not sure of that; and since you want IE6 support, it's out of the question anyway.
This is not possible using only CSS.
CSS (Cascading Style Sheets) works only down the document tree.
The reason for this is performance.
For more info read this:
http://snook.ca/archives/html_and_css/css-parent-selectors
http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors#comment_3940
You need to use javascript for that to work.