I found a snippet of SCSS that I'm trying to use.
It contains CSS vendor prefixes that I'm unfamiliar with:
::-webkit-slider-runnable-track
::-webkit-slider-thumb
::-moz-range-track
::-ms-fill-lower
etc
I'd love to use Chrome or some other browser's "developer tools" / Inspect to be able to play around with colors and dimensions, but I can't find where these particular CSS rules are.
All I can find is my input element: <input type="range" id="position" name="position" min="0" step=".1" max="70" value="70">
Currently, I'm editing SCSS in Netbeans, and it compiles to CSS on each save, and then I refresh my browser.
It's time-consuming, and I'd also really like to see where those rules take affect when I highlight an element in the inspector.
I appreciate any suggestions.
P.S. I figured there would be a way to show them, like there is for active, focus, hover, and visited rules.
The vendor prefixes are actually considered pseudo-selectors, and as such, create their own CSS selectors. You won't see them in the CSS states such as :hover and :active, but rather as independent CSS rules:
input[type='range']::-webkit-slider-runnable-track
input[type='range']::-webkit-slider-runnable-thumb
input[type='range']::-moz-range-track
input[type='range']::-ms-fill-lower
This is illustrated in the example below, which has different displays on the different browsers:
input[type='range'] {
width: 210px;
height: 30px;
overflow: hidden;
cursor: pointer;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 200px;
height: 10px;
background: #AAA;
}
input[type='range']::-webkit-slider-thumb {
position: relative;
height: 30px;
width: 30px;
margin-top: -10px;
background: steelblue;
border-radius: 50%;
border: 2px solid white;
}
<div class="container">
<input type="range" id="position" name="position" min="0" step=".1" max="70" value="70">
</div>
Hope this helps! :)
I finally could find an option on Chrome Dev Tools to show the user-agend pseudo-elements.
Basically you have to go to "Preferences" and scroll to the "Elements" section, where there is a option for that.
Webkit Pseudo Elements Documentation
Related
I have the following css in my app that makes my checkboxes much more gray. This solution will not work in IE 11. How can I fix this?
input[type=checkbox][disabled] {
filter: invert(25%);
}
The filter css property is not supported by IE, even with -ms prefix. You can read about this at the MDN. So short answer: It is not possible to achieve this with the filter Property in IE.
You could try to write a workaround using the :before pseudo selector, like in the quick example below. I used a label while hiding the actual checkbox. Please note, that the appearance of checkboxes depend on the browser, so this "fake" checkbox may looks different than other enabled checkboxes, so I would recommend you to also style these! It is more work to do, but this is a workaround, not a solution ;)
input[type=checkbox][disabled] {
display: none;
}
input[type=checkbox][disabled] + label:before {
content: " ";
display: inline-block;
height: 12px;
width: 12px;
background: rgba(0,0,0,0.25);
border: 1px solid #aaa;
border-radius: 2px;
margin-right: 5px;
}
input[type=checkbox][disabled] + label {
color: #aaa;
}
<input type="checkbox" id="1" disabled/>
<label for="1">Disabled</label>
If you actually want to know how to make custom checkboxes with CSS, you may want to take a look at this SO post, which already delivers a great answer to this problem :-)
I was wondering if this is possible:
if I have an input field:
<input type="button" value="some value" class="icon-button" />
and it is styled with gradient background, border, box-shadow, etc.
I want to have the button like an Icon with all its style and the value-text right next to it.
I thought of something like this, but it didn't work:
.icon-button{
display:block;
width: 25px;
height: 25px;
/* gradients, borders, shadows, etc. */
text-indent: 30px;
overflow: visible;
}
Any Idea? I know I could solve it with javascript, but I would like to know if there is a css way to do this.
I don't think you're going to achieve this (at least not very neatly) using an input. If you can amend your markup to use an actual button to submit though, it's pretty trivial:
<button type="submit">Some value</button>
CSS:
button {
line-height: 25px;
border: none;
background: transparent;
cursor: pointer;
}
button::before {
content: '';
display:inline-block;
vertical-align: middle;
width: 25px;
height: 25px;
margin-right: 3px;
/* gradients, borders, shadows, etc. */
background: red;
}
You could use a span rather than generated content if IE7 support is needed. This approach is not possible with an input, as that can't contain any elements, nor can it have generated content.
If you need to use an input, you could achieve the same thing by wrapping it in a span and styling that.
I have followed instructions verbatim using border:none and background:transparent, but a border still shows in the my text areas. I am using a background image to customize the look, but can not seem to remove the border.
website in question
http://www.officeyoganyc.com/
markup
<div class="fieldHolder">
<div class="attributeinput1"><input type=text name=email value="email" size="16">
<script language="Javascript" type="text/javascript">addFieldToCheck("email","Email");</script></div>
</div>
css
.fieldHolder
{
width: 137x;
height: 24px;
background: url(http://www.officeyoganyc.com/themes/zen/zen/images/textarea.png) no-repeat;
margin-left: 209px;
margin-top: 162px;
}
.attributeinput1
{
border: none;
color: #000000;
background: none repeat scroll 0 0 transparent;
color: #000000;
height: 22px;
margin-left: 5px;
margin-top: 5px;
width: 170px;
}
This selector:
.attributeinput1 {
Only styles the <div>. You want the <input /> inside the <div>:
.attributeinput1 input {
By the way, the input tag is self-closing:
<input ... />
Your site might look funky in IE if you omit the />, as it might be treated as the beginning of a block element.
Also, one more thing (just a nuance in HTML), the language= attribute in the <script> tag is depreciated (i.e. unsupported and old). You can safely omit:
language="Javascript"
in your <script> tags.
If you use Google Chrome or Firefox, there is a really useful tool you can use. In Firefox, it's called Firebug. In Google Chrome, it's called something like Inspector.
They both allow you to "inspect" the webpage's layout and see what CSS properties affect what elements.
Here's what I mean. Look at the right-hand-side:
I used this to confirm that your CSS wasn't being applied properly. To activate it, right click on any part of a webpage and click "Inspect".
Hope this helps!
You have too many attributes for your background and border definitions.
This should work.
.attributeinput1 input {
border:0;
background:none;
}
If not then try
.attributeinput1 input {
border:0!important;
background:none!important;
}
I have a drop down menu that I have styled using CSS and a Jquery plugin named: Selectbox. http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/
Everything is working great and looks perfect in Firefox, Chrome, and Safari. But for some reason when I click the drop down box in Internet Explorer the drop down floats all the way to the right and not directly beneath the drop down. I have only been coding 3 months so it could be a really stupid mistake but I can't seem to figure it out. Any help would be appreciated.
Here is the HTML:
<div class="foldersoption">
<select name="Items" id="Items">
<option value="option1">My Items</option>
<option value="option2">Shoes</option>
<option value="option3">Birthday Ideas</option>
</select>
</div>
Here is the CSS:
.foldersoption{
float: left;
margin-left: 25px;
}
div.selectbox-wrapper ul li {
border: 1px solid #FFFFFF;
cursor: pointer;
display: block;
font-size: 12px;
list-style-type: none;
padding: 5px;
text-align: left;
width: 243px;
}
.selectbox {
cursor: pointer;
display: block;
float: left;
font-size: 15px;
height: 25px;
padding-left: 5px;
text-align: left;
width: 250px;
}
Can you help please?
Apply zoom and position relative to the foldersoption element, and other elements as needed. For example:
.foldersoption {
zoom: 1;
position: relative;
}
This will force IE to treat it like the other browsers do. IE doesn't handle floating very well - you have to give it some additional configuration & constraints in order for it to work properly.
Edit: Based on the screenshots, IE is complaining about security issues - is there a chance it is blocking certain scripts from loading as well? Try disabling or reducing the security in IE and see if the menu drops.
Edit #2: Actually that plugin you used is old and does not appear to be well tested or maintained. Can I suggest an alternative?
http://plugins.jquery.com/project/jQuerySelectBox
You can see an example here: http://labs.abeautifulsite.net/projects/js/jquery/selectBox/
I tested it in IE7 and it seems to work ok. Seems extremely simple to set up, and to change the appearance you only need to change or override the default CSS styles.
I have a button i want to convert the button into a hyper link, it works fine in Mozilla but in Internet Explorer it presses down as a button a click takes place ... so please help ....
Input.Button-Link, input.Button-Link:active
{
border: 0px;
behavior: url("cssHover.htc");
padding: 0px;
width: auto;
overflow: visible;
background: transparent;
color: Blue;
text-decoration: underline;
display: inline-block;
}
input.Button-Link:active
{
padding-right:50px;
outline:0;
}
Input.Button-Link:hover
{
cursor: pointer;
}
I don't understand what you're trying to accomplish but here are a few things you can try:
Add styles to input.Button-Link:focus
By using <input type="image" src="button.gif" alt="Button" />
In conjunction with jQuery use this plugin to style your buttons
You need JavaScript to solve this for IE.
IE's behaviour here is hard-coded and can't be changed with CSS IIRC. The last thing that springs to my mind is to use display: inline instead of display: inline-block.
You might be better off using a link and a tiny bit of JavaScript.