I have a sort of webshop, and on mobile when user selects filters, I want the filter button to have borders - this way user would know they have some of the filters applied. Respectively, when none of the filters applied, I want the button to go back to normal no-border state.
I can do this:
#include mobile {
border: solid;
}
But this way, the border will appear always, which is not what I want. The filters which can be selected are located in another .scss file and folder, so I can't (?) link them to this file I'm working on. So is there any way I could achieve this using CSS/SASS, or will I have to apply some JS here?
Alright, so what you need to do is detect whether you have at least a filter applied or not. This requires some javascript to condition on it.
If the condition returns true(in your case meaning some filters are selected), you'll have to add a CSS class to the filter button that will make it have borders. Initially, your filter button shouldn't have any filters since we suppose that there are no filters when the user starts navigating.
so for example here's some scss:
.filter-button{
border:1px solid transparent; /* has a transparent border*/
transition: border 0.3s ease-in-out; /*adds a cool transition when you
add the has-filters class*/
&.has-filters{
/*when the condition if (filters_exist) returns true, you add this class to
the HTML filter button which has the class .filter-button*/
border:1px solid blue;
}
}
Related
Say, I have an input box which has a border color which is the browser's default value or a value set by user. Now there is another element where I want to use the same property value as that of the input element. Is this possible to define in CSS? The idea is that their border colors should remain in sync with each other. It can be assumed that the elements are siblings.
You could achieve this using CSS custom properties (variables) set on a shared parent element.
:root {
--main-color: blue;
}
label {
color: var(--main-color);
}
input {
border: 1px solid var(--main-color);
}
<label>my input</label>
<input type="text" />
No, there is no such method to sync properties between two elements in css. However, you can use classes in css for this purpose. Or otherwise javascript might help.
In a comment you mention that you want the browser default, if you don't declare any additional styling on your input elements they will receive the browser input.
Otherwise, if you're chasing a specific styling of input that you've seen you can inspect the element in your browser then create your own custom class based off the values that you find upon inspection and use this class on your own input elements.
So, I am using Squarespace to build a website, and for whatever reason, squarespace uses radio buttons for their nav (at least secondary nav) instead of list items.
I am trying to make edits to the menu so that when you click on a menu item, it is essentially "checked" (since they use radio buttons) and then applies the CSS styling I would like.
I am, however, having some difficulty getting the menu items to retain their styling.
By using attribute selectors, I can select the menu items; however, I am having trouble selecting them to display only in the :checked state.
The reason I am having to use attribute selectors is because the class name that begins with "menu-select", has a string of numbers behind it that actually changes with every reload. So, every time I make any particular changes to the code to the full, numeric class name, upon the next reload, the changes do not stay because the class name (or numbers because that's what they are) has changed.
My question: Is there a way to use attribute selectors and then target pseudo elements?
I want to make changes to my CSS only in the :checked state.
Right now my code looks like this:
.menu-block .menu-selector label[class^="menu-select"] {
text-decoration: none !important;
border-bottom: 4px solid black;
}
But this is really what I want it to do:
.menu-block .menu-selector label[class^="menu-select"]:checked {
text-decoration: none !important;
border-bottom: 4px solid black;
}
Thanks so much!
I have some thoughts on my head that involves changing the background-color of some text input fields I have. I went ahead to see if they'd look as I hoped, and this is what I saw:
First one being truly plain, second one being with the CSS styling background-color: #FFFFFF; and the last one has background-color: #FEFEFE; which you can experience yourself there: JSFiddle
It seems to be that browsers are dismissing all their pre-set styles for the input elements, as soon as I change this style property. Internet Explorer 11 even gives up on the blue glow which is normally present when a text input field is hovered (should also be on blur).
Is it possible for me to change just the background colour without causing all that?
I probably will just thoroughly style the text input fields anyway, I'm asking it out of curiosity.
I did some research about this, its something that makes me wonder what its the real behavior, unfortunately, I couldn't find any explanation to this, so I can only assume, that once you style an input, the appearance of the same, its reset to a default value, ignoring the native styles that the browser is giving to the element.
I think you probably know this already, because of your last comment, but just in case, this will help you keep the blur effect on the inputs, and at the same time, it will make them render in the same way for different browsers, you can also add height to that, to keep it even more consistent.
input
{
border:solid 1px #CCC;
background-color:#FFFFFF;
}
input:focus
{
box-shadow:0 0 3px 0 blue;
outline:none;
border:solid 1px #CCC;
}
I hope this helps!
I am using MVC3.
I have a table and an Html.ActionLink inside of it.
I have already set the text decoration for none, but the link is still blue. I change the table:hover background-color and the color(of the text), and when I put the mouse over the row, the text that are not a link gets white, but the link still blue. If I change the a:hover, the link gets white just when I put the mouse over it, and not just over the row.
Is there a way to do that with css?
Typically, to cover all the anchors when you are hovering over the row.
#tableid tr:hover a {
/* Your Styles */
}
But this does not work on all IE browser so, use JS to catch the event and apply styles to anchors in it.
use the following css:
#yourTableId:hover a {
color: #FFF;
}
you can replace #yourTableId also with table and / or .yourTablesClass depending on where the css should be used ;)
this works also for child elements e.g.:
#yourTableId div:hover a
#yourTableId tr:hover a
so in general we can say you can use the following:
#yourTableId *:hover a
where * is a tagname, classname or id (dont forget class and id prefixes -> .classname and #idname)
here a jsfiddle example
I've got a table that has some <input type="text"> boxes in it, and I want these to show as normal text when printing. I have set up a media="print" stylesheet with
input
{
border-style: none;
}
in it, and this removes the border so the content just looks like text, but the input is still pushing the width of the column to its actual width (not surprisingly) so I get unnecessary empty space and column widths. Is there a funky way to somehow either set the input's width to its content size using CSS, or some other way to fix this?
Someone on another forums suggested using a print button which creates client side scripting to physically change the page markup, but unfortunately that's not really practical due to the complexity and dynamic nature of the page.
I'm pretty sure this can't be done, but I thought I'd ask.
Nope, I don't think this can be done without some scripting. But the scripting would be really easy to achieve with a Framework like Jquery:
For each input element, you would create a <span> next to it and give it a class that is hidden in the media="screen" stylesheet, and visible in media="print".
The input element itself would get a class that works the other way round, visible in screen and hidden in print.
Each input element would get a change event that updates the neighboring span.
I don't have the JQuery routine yet to pull this out of my sleeve, and not the time to put it together right now, but it is definitely solvable and still quite unobtrusive - no need to execute any scripting when the user starts printing.
I bet if you re-tag the question or ask a new one, one of our resident JQuery gurus will take a look at it :)
If you are using Bootstrap:
#media print {
.no-print {
display: none !important;
}
.form-control
{
border: 0;
padding:0;
overflow:visible;
}
}
I came across this searching for information on how to style my forms and a few other things.
After messing with some CSS I figured out a CSS only method that works for me.
My forms all have styling that involved color background and a border that is black.
In my print CSS file I copied my form css and changed all of the colors (not the text itself) to white. In other words it hides my text box and displays only the text.
Original CSS - #form textarea, #form input, #form select{ border:1px solid #ddd; color:#313131; }
Print CSS - #form textarea, #form input, #form select{ border:1px solid #fff; color:#fff; }
Works like a charm =>
Hope this Helps
input { border-style: none; display: inline}
I'm using ASP.NET and had the same issue.
I solved it by adding a Label that corresponds to my Textbox, and had two classes set up:
In #media screen:
.hdnPrint {visibility:visible;display:block;}
.visPrint {visibility:hidden;display:none;}
In #media print:
.hdnPrint {visibility:hidden;display:none;}
.visPrint {visibility:visible;display:block;}
For the textbox, I assigned the hdnPrint class, and on the label, I assigned the visPrint class. When the user prints the form, the label is displayed and the form field is hidden.
I assume you can do something similar in a non-ASP.NET environment by following the same pattern.
No scripting required.
To define the width of the input fields in the CSS print section, use:
width: ?cm
for the corresponding input elements.
Tested in Firefox; maybe it wasn't working in previous versions of the browser.
For bootstrap this works for me.
It is based on user5712635s answer but I added the appearance properties to get rid of the down arrows on selection inputs.
#media print {
.form-control
{
border: 0;
padding:0;
overflow:visible;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
}