i'm writing a component that is to be used across multiple websites.
each website has it's own stylesheets and displays certain things differently.
all of my html is wrapped within a div with an id:
<div id="myComponent">...</div>
my component however is to look consistent across all of the sites.
this is fine as i apply styling to most of the attributes in my component.
div#myComponent p {font-size:11px;} etc
however i've come across a site that removes the border from all input fields
input {border: medium none;}
i need to 'un-apply' this directive for the input fields within my component, and preferrably use the browser's default styling for inputs, as the border style for input type="text" will need be different to input type="button".
how would you achieve this?
You'd need to redefine it.
https://developer.mozilla.org/en/Common_CSS_Questions#Restoring_the_default_property_value
You can do it now since CSS2: border:initial;
div#myComponent input { border: 1px inset; }
you can use styles for different input types/
css :
div#myComponent input[type=text] { border:dashed 1px #ccc;}
div#myComponent input[type=button] { border:solid 1px #999;}
You can use javascript to add a class to the input.
Here is a jquery example...
<script type = "text/javascript">
$(function(){
$("#myComponent input[type=text]").addClass("borderMe");
});
</script>
and then define 'borderMe' in a stylesheet (or style tag)
<style type = "text/css">
.borderMe
{
border:solid 2px black;
}
</style>
Related
The book I am using tells me to do the following:
img[title.jpeg] {border: 3px solid;}
This does not work, I have tried without the [title.jpeg] and it still does not work. How do identify an img element in a CSS style sheet? Does it matter that it is embedded in a H1 element?
Just use the parent element before the img in your css to identify the correct image.
It does not matter if your image is in a h1 tag as you can see in the example below.
You can also give the image a particular id to select only that image instead of trying with the image name.
h1 img{
width:50px;
}
#thisOne{
width:100px;
}
<h1><img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/></h1>
<img id="thisOne" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
The example from the book would only work if your file was named "title.jpeg" - and if they added:
img[src*="title.jpeg"]{ border: 3px; }
You could add a class, id or other identifier to your image and modify the class. Or you could use the above syntax and just make it match your file name.
You can add inline CSS within HTML with a style tag like this:
<img title="#" style="border: 3px solid" src="example.jpg"/>
Or, you can use CSS...
for example, you can add style to the img tag:
img {
border: 3px solid;
}
If you want to use CSS you can include a separate .css file or add the css code to your html file with <style> tags inside the <head> part of the page.
I have a 3 scss file which are the base.css, layout.css and contents.css. I declare them as the following:
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="contents.css">
base.css is for the default styles of elements. I use the layout for the header, footer, and also the wrapper of the website. As for the contents.css, the name speak for itself. Yes it is all the contents of the website. Since I got it separately, I don't practically use specificity. Like for example:
base.css
input {
padding: 12px 0 12px 0;
}
layout.css
layout-wrapper{
/*some styles*/
}
contents.css
input {
font-size:1.5em;
padding: 2px 0 2px 0;
}
Instead of overriding the input of contents.css the style of the base.css gets read first and then comes the contents.css. I wonder why it doesn't work for input because in other elements it was fine. I can achieve my goal if I put a specificity in my input element but it would look like this:
contents.css
layout-wrapper{
/*some styles*/
input {
font-size:1.5em;
padding: 2px 0 2px 0;
}
}
This would defeat the purpose of separating the layout and the contents. So my question is how can I override the input style from contents without any specificity?
even having separated files, specificity is the answer to your problems, other may say to use !important , but avoid that at any cost.
you should give the defaul diff class names or element name like make it default-input for the default css
I have sort of elements with this pattern:
<div data-image="{imageurl}" ...></div>
I want to set this elements background-image to data-image. I test this CSS code:
div[data-image] {
border: 2px solid black;
background-image: attr(data-image url);
}
border show correctly but nothing happened for background
How can do I fix this code only with css (not js or jq)?
a nice alternative to data- attributes (or the attr() approach in general) can be the use of custom properties (MDN, csswg, css-tricks).
as their values are not restricted to strings, we can pass around any type that is allowed as a custom property value!
also, you get the benefit of updating these properties at runtime, with a swap of a stylesheet.
.kitten {
width: 525px;
height: 252px;
background-image: var(--bg-image);
}
<div class="kitten"
style="--bg-image: url('http://placekitten.com/525/252');">
</div>
As of writing, the browser support of attr() notation on CSS properties other than content - like background-image - is very limited.
Besides, as per CSS level 2 spec, combining url() and attr() is not valid:
content: url(attr(data-image));.
Hence there is no cross-browser CSS solution at the moment to achieve the desired result. Unless using JavaScript is an option:
var list = document.querySelectorAll("div[data-image]");
for (var i = 0; i < list.length; i++) {
var url = list[i].getAttribute('data-image');
list[i].style.backgroundImage="url('" + url + "')";
}
div[data-image] {
width: 100px; height: 100px; /* If needed */
border: 2px solid black;
}
<div data-image="http://placehold.it/100"></div>
In your HTML:
<div data-image="path_to_image/image_file.extension" ... ></div>
In your CSS:
div:after {
background-image : attr(data-image url);
/* other CSS styling */
}
Problems:
This is your required answer. Check this documentation in w3.org. But the main problem is it won't work, not yet!. In many browsers, attr() runs successfully when it is used in content: attribute of the CSS coding. But using it in other attributes of CSS, it doesn't work as expected, not even in major browsers.
Solution:
Use scripts such as JavaScript or jQuery.
References:
W3C attr()
MDN attr()
Thanks:
Hashem Qolami for correcting my syntax. :)
If the goal is being able to set the background-image style of an HTML element from within the HTML document rather than the CSS definition, why not use the inline style attribute of the HTML element?
div[style^='background-image'] {
width:400px;
height:225px;
background-repeat:no-repeat;
background-size:contain;
background-position:center center;
/* background-image is not set here... */
}
<!-- ... but here -->
<div style="background-image:url(http://img01.deviantart.net/5e4b/i/2015/112/c/5/mandelbrot_62____courage_to_leave___by_olbaid_st-d646sjv.jpg)"></div>
EDIT:
If selecting the <div> by style is not an option, you may be able to give it a class and select it by class name.
I am using AjaxToolkit combobox in my page... I am trying to change the width of combo-button . But I couldnot. Because it has inline style by default..
I tried the following code to add style
//Combo css
.ComboClass .ajax__combobox_buttoncontainer button
{
border-radius: 0px;
box-shadow: 0px;
width :12px; height:12px;
}
But border-radius and Box-shadow styles are applying but Width& height is not applying ..
Because ComboBox Button got default inline styles.. I cant remove that line styles too..
Please post me some suggestions....
Add a javascript function to search for and strip the attributes on document ready.
The jquery way is:
$(document).ready(function()
{
document.find(".ajax__combobox_buttoncontainer").removeClass("ajax__combobox_buttoncontainer").addClass("myAwesomeClassWithCoolDimensions");
});
Make sure your css has a myAwesomeClassWithCoolDimensions class.
Finally it works.. Little change on my css. I just added !important property to override the default element (Inline styles)..
<style type="text/css">
.ComboClass .ajax__combobox_buttoncontainer button
{
box-shadow: 0px;
width: 14px !important;
height: 15px !important;
}
</style>
Now I can change width & height of the combo-button.
Here is the code I have so far:
HTML:
<!DOCTYPE html>
...
<form>
<input type="image" value=" " class="btnimage" />
</form>
...
CSS:
.btnimage {
width: 80px;
height: 25px;
background:url('C:/Users/John/Desktop/Misc Things for the CoD Ghosts Site/SubmitButton.png');
}
.btnimage:hover {
background-position: 0 -25px;
background:url('C:/Users/John/Desktop/Misc Things for the CoD Ghosts Site/SubmitButtononHover.png');
}
The above code works, but there's a border that surrounds the button, which I want to go away. So far, I've tried adding background-border:0; to both of the classes, and it did not work.
try
input {
/* sets border width to 0 and border style to none */
border:0 none;
}
or
input {
border: 0px solid black;
}
background-border is not a css property
You can remove a border with css by setting it's width to 0 or it style to none.
To avoid an internet explorer legacy bug, you have to specify a border-width or a border-color to make border-style:none apply. So your best bet if you care about my grandma, it to use border:0 none;
.btnimage {
border: 0 none;
width: 80px;
height: 25px;
background:url('C:/Users/John/Desktop/Misc Things for the CoD Ghosts Site/SubmitButton.png');
}
Since you did not mention when your border is visible, perhaps it an outline visible on your input focus.
If it is your case, add :
.btnimage:focus {
outline:0
}
input {
border:0 none !important;
outline:0 !important;
}
The main problem here is that you define an input type="image", but not provide a source, so this border is like a broken image, because when you set the type as image the input expects an src attribute as well.
In my opinion you have 2 solutions:
1st: set the "src" property of the input, in the HTML code, and if you want to change the hover image, you can do this through javascript.
<!DOCTYPE html>
...
<form>
<input type="image" src="your_image_url" class="btnimage" />
</form>
...
2nd: change it to input type "button", or a link " ", than remove border and background in the CSS.
<!DOCTYPE html>
...
<form>
<input type="button" class="btnimage" />
</form>
...
Sample: http://jsfiddle.net/Bpv34/
CSS
border:none none;
Yes working
To remove the border, write the following line in your CSS wherever the border appears:
outline: 0;
try the prefixes too
input {
border:0 none;
-moz-border:0 none;
-webkit-border:0 none;
outline: 0; //add this too
}
try this
input {
border:0 none !important;
}
by writing important it will definately work.
1) Use src attribute to define image url.
2) Use custom button with div - something like:
<div class="btnimage" onclick="blablabla()">Button</div>
It can solve the problem.
This finally worked for me. All attempts with "border" did not work:
input { outline: 0 !important; }
I was just having trouble with this too.
First off, you may as well set the src equal to an image you want to use if you are using the input type of 'image'
Here is mine: <input type='image' src='img/share.png' alt='Share'>
Then make adjustments in your css:
#fbshare input[type="image"] {outline:none;}
#fbshare input[type="image"]:active {outline:none;}
This solved my problem in Chrome, and I presume it should solve yours too. If it is still a problem nearly 2 years later. (I mostly posted this for others who find this page in a google search)
This page helped me come to the above conclusion.
http://themeforest.net/forums/thread/remove-border-after-clicking-button/33948
I was having the same problem as the OP - specifically for an image input. It certainly seems to be because of the browser interpreting it as a "broken image" if no src attribute is set.
So this works as a solution, by setting the attribute to a single transparent pixel, the image input non-border non-outline "border" goes away:
<input type="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="btnimage">
No CSS needed (or seems to work.)