I am currently trying to properly CSS style a SELECT element.
Specifically, what I want to do is to have the initial selected value be a bit distanced from the arrow/select/icon/whatever that opens the list of options.
Currently, it appears as: VALUE[V] where [V] is the triangle/arrow button. I want to create a spacing between the end of VALUE, whatever that comes to be, and the [V] button/part of the select element. Margin is obviously not relevant and padding takes place outside of the [V] as well.
Since I have several SELECT's - is there a 'CLEAN' or 'ELEGANT' method to do this through CSS other than individually giving a width to each of these elements?
Regards
G.Campos
Why cant you use padding? It seems to do what you are after.. Check this out:
http://jsfiddle.net/GYyKh/1/
Make your select have a class so that you can call it from your css. Then do something like
.spacer {
width:500px;
}
That will give all the elements with that class name a width that you specify
You may find this article useful: http://css-tricks.com/select-cuts-off-options-in-ie-fix/
It suggests different possibilities with JavaScript.
Related
I need to apply a function to checkbox elements that are not part of a bootstrap-multiselect element. To do this I'm trying to make a css selector that fitlers out based on the parent they have. The syntax that I have so far is this:
$(this).find("input[type='checkbox']:not(ul.multiselect-container>input)")
Where the :not(ul.multiselect-container>input) is my attempt to specify to the css selector that I want all css elements except for the ones that are children of an unordered list that has the class multiselect-container.
From doing some investigation it seems that this should be possible, but my syntax doesn't seem to cut it. How can I make this work with the :not function? OR perhaps another way.
I have a list with groups in it, and use CSSOM to dynamically filter the contents using a text field. This is a way to implement a "search" using only CSS.
Unfortunately when the filter filters everything out, the group containers still remain visible. I'd need to also set display: none onto them using CSS somehow, otherwise I need to add a bunch of JS to control them.
Is this remotely possible? I know this is a big of a long shot, but is there a selector that can select elements whose children (fitting some selector) all must have a style selected on them?
Is it even possible if I greatly relax the constraints, where this might be a selector that selects elements whose children (fitting some selector) all must have a particular class?
No, it's impossible only via CSS:
There is no parent selector.
There is no visibility selector, except something like :not([style*="display:none"]):not([style*="display: none"]) if you hide elements only using inline CSS.
There is no CSS way to know if all children satisfy some condition.
This can be solved only using pure JS loops and conditions or via jQuery selectors like .parent:not(:has(:visible)).
I am working on a project which is completely done by HTML5,MVC 4,CSS 3, JQuery, LINQ. There are a lot of ui,li and other html controls and we have done styles for those elements.
Now i have a situation that i must include a JQ Grid (http://www.trirand.com/blog/jqgrid/jqgrid.html) , we were using our own client side grid. Now what the problem is if i use the style sheet of the JQ Grid on the page, there is a possibility to get affected to other element also. Anyway i am gonna use that particular grid inside a div element i need that style sheet should be affected to that the elements which all are inside that div.
Is there any possibilities?
(I wonder if this is possible in this way ;)
<div id="jqgridcontainer" stylesheet="styles/jqgrid/jqstyles.css"> my ui elements here </div>
I know its not possible in this way )
NB: editing http://www.trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css[^] by adding "jqgridcontainer" div id to all the element css is not possible.
No you can't add css file to one div, you can only add style to the all document.
The only way i see to use css file to only one part of your page is to put your grid in an iframe (which is not really good...)
You can't do <div id="jqgridcontainer" stylesheet="styles/jqgrid/jqstyles.css">. If jqstyles.css is not a big file you can change the div{...} rules in it with div.jq {...} and add class jq to your divs that you want to use jq styles. If jqstyles.css is so big that you can't go through it all, give your divs, which you want to have your style, a class like 'myDivClass' and change your css to div.myDivClass {...}. You may need to mark your rules as !important or just reference jqstyles.css first and your css 2nd..
Use ids and classes properly to avoid all the division to get the same property..
I am using drupal actually and I'm trying to position an element using "views slideshow". this isn't really a drupal question ,more of a css queston, however, one of my elements is called:
<div class="views-slideshow-controls-bottom clear-block">
Here's an image of the element to get an idea of what I'm doing.
But anyway, I made that class above in my stylesheet, but the change isn't showing up on my page. I'm trying to "float" those slide previews that are highlighted in the image to the RIGHT side of the image instead of below the image how it is now. I thought a simple "float:left;" would do, but for some reason that clear:both is staying in there, plus the floatleft isn't even appearing.
The class there has a space in the middle of it, so I was wondering if on the stylesheet, this is allowed?
.views-slideshow-controls-bottom clear-block {
float:left;
}
For example, will the spaces allow the element to show or not? Thanks,.
You need to chain the classes together in your css with a ..
.views-slideshow-controls-bottom.clear-block {
float:left; /* notice ^ */
}
If you want to select based on two classes, chain them like this:
.class1.class2
This basically translates to any element with class "class1" and with class "class2"
It works just the same was as something like a.btn[href] meaning any element with tag name "a" and class "btn" and an "href" attribute - by chaining without spaces, you apply further restrictions to the current element.
You cant have space in class name cause when you give class attribute it will be considered as two seperate class
On my page, I have custom styled hyperlinks, and I also have alot of hyperlinked images. I don't want these custom styles to appear on the hyperlinks that only contain images. Instead of adding a separate class (i.e "nostyle") to each hyperlinked image, can I somehow target the hyperlinked images from my stylesheet?
You cannot select the parent of a matched item in CSS directly. There are workarounds with js (e.g. Searching elements and applying class attributes to their parent nodes) but seems a bit clumsy. You would rather refactor your document structure to find out a slicker solution.
sure, just use
a img {
// your style here...
}
if you want to target only the images within a certain class of links, use
a.yourclass img {}
Based on what it sounds like you're asking for the answer is no. You can't go backwards in the CSS only forwards.
As Theo.T mentioned, you could have a JS work-around.
One idea is to do an element innerHTML check to see if the element has an <img> tag inside it and if it does, change the element.className = "nostyle"; but that's a messy workaround and by the time you get the syntax right in JS (and cross-browser) you could have re-factored your document.
no need for a anchor class.
a[rel="image"] img {}