I'm new to CSS and I'm trying to add a background image to a button. I have a simple input button that I'm using as a toggle for displaying a div. I want to put an image in the button. I'm using the following HTML.
<input type='button' id='toggleButton'>
When I view this in my web page in Firefox 9.0.1 it looks great:
I applied the following style to it to add my image:
#toggleButton {
background-image: url("plus.png");
background-repeat: no-repeat;
background-position: center;
}
As soon as I apply the background image the button becomes very plain:
I used Firebug to examine the computed style of both buttons and it didn't show any difference other than the style I appled and some minor changes in border width (from 2.5px to 1.66667px). I added border-width: 2.5px; to the style and it didn't help.
My image has an alpha channel and only the black of the plus sign should show. My understanding of CSS is that the original button's style should still be applied and my button only adds the background image. I expected to end up with a button that looks approximately like this:
How do I add the background image and keep the fancy button look?
How about try something like this if you just want to add a plus symbol:
Html:
<input type='button' id='toggleButton' value="+" />
CSS:
#toggleButton {
font-family: Helvetica, Arial;
font-weight: bold;
font-size: 14px;
vertical-align: middle;
text-align: center;
padding: 3px;
color: #444444;
}
Please try making your button picture to circular bead.
Related
I want to add an image inside the text
so in the section, I add the "heading element" and edit its color to transparent then
add an image inside the "heading element" background from the advance tab and also edit
CSS snippet
selector .elementor-widget-container{
-webkit-background-clip:text;
background-clip: text;
}
but not working, the text didn't appear
I even tried using HTML&CSS code but not working, cleans up the whole section & redo but not working
You can use the background-clip property to achieve what I believe you are going for. Browser support is pretty decent. Read more about it here https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
EDIT: I see you tried that. You need to have a background property on the same element that you clip.
p {
margin: 1em 0;
padding: 1.4em;
background: url(https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
font: 900 2.2em sans-serif;
text-decoration: underline;
}
.text {
background-clip: text;
-webkit-background-clip: text;
color: rgba(0,0,0,.2);
}
<p class="text">THE IMAGE SHOULD SHOW CLIPPED BY THE TEXT</p>
I am trying to simply change the color of a text/password input. Unfortunately, everything to be able to change is hidden behind the #shadow-root so my CSS can't touch it.
I've tried to simply write:
input {
color:var(--ion-color-primary) !important;
}
but of course it does not see anything inside the shadow realm. the HTML is laid out like so:
<ion-input _ngcontent-c0="" class="form__group__item--input ng-untouched ng-pristine ng-invalid hydrated ion-untouched ion-pristine ion-invalid has-focus" formcontrolname="email" type="text" ng-reflect-name="email" ng-reflect-type="text">
#shadow-root
<style></style
<input> // Need to edit this one
<slot></slot?
<input type="hidden" class="aux-input" name="ion-input-0" value="">
</ion-input>
The css that's controlling the color of the input is not using a variable that I'm able to change anywhere else
input, textarea, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 11px system-ui;
}
but I'm not able to override those. I feel like I need to do something in the root, but I don't know CSS variables yet.
is there any way in Ionic 4 to change the input text color??
Doing a quick Google search brought up this site which explains you can use the ::shadow pseudo-element to style elements within shadow trees, so try this
ion-input::shadow input {
color: var(--ion-color-primary);
}
Edit:
Doing some more digging around I found this SO post which says you can't style things inside the shadow DOM with global CSS, so you need to instead create and append a style tag to the host.
// host is the element that holds the shadow root:
var style = document.createElement('style');
style.innerHTML = '.the-class-name { property-name: my-value; }';
host.shadowRoot.appendChild(style);
Native input in ionic4 inherits text color so you just have to set css color of ion-input.
HTML:
<ion-input placeholder="Muhahaaaa"></ion-input>
CSS:
ion-input {
--placeholder-color: green; /* placeholder text color */
color: var(--ion-color-primary; /* input text color to primary */
}
Reference to ionic code (4.0.0-beta.11):
https://github.com/ionic-team/ionic/blob/master/core/src/components/input/input.scss#L43
i have created a web page with a modal popup control.
Within this control i dynamically build a html to display data.
Within some of the tables tags i have the following:
<td>
<span>S</span><span class="pop">description</span>
</td>
i want to create a popup effect when hovering over the tag.
My CSS is:
a .pop {
display:inline;
position:absolute;
visibility: hidden;
background-color: #FFFFFF;
border: solid 2px #000000;
padding: 5px;
margin: 0 0 0 10px;
color: #000000;
text-align: left;
font-weight: normal;
}
a:hover .pop {
visibility: visible;
}
This works perfectly when i use the control within a standard HTML page.
It appears to work within the modal popup control, until i need to scroll down the modal control when the table data is larger that the modal window.
The hover effect then appears to not be working. I think this is because im using the "position":"absolute" for the ".pop" class, and the hover effect is working, but its position is no longer relative to the tag because I have scrolled through the page.
I am not able to get round this and its killing me. Do i need to dynamically reposition the control using a "mouseover" event, or can this be achieved via CSS, and I’m just missing something / being a novice.
Karl
Try adding this:
a { display:block; position:relative }
This will make the span.pop be positioned relativily to the a tag it is in.
example:
http://jsfiddle.net/R4Erw/
I am trying to double the size of my checkboxes on a few pages. How do I make that happen in CSS? I don't want to style the hover.
Ideas?
To double the size of checkboxes, you can use the CSS scale property. The (2,2) means 2 times the width and 2 times the height of the original, but this will be quite large.
input[type="checkbox"] {
transform:scale(2, 2);
}
You can also use decimal values, for just slightly bigger checkboxes.
input[type="checkbox"] {
transform:scale(1.3, 1.3);
}
This works. It uses relative sizes so it scales with your current font size.
input[type="checkbox"] {
width: 1.2em;
height: 1.2em;
}
You may need to adjust your margins though.
Styling checkboxes is risky business. It's one of those things that never seems to work consistently with all browsers.
or you can try with
style="zoom:1.2"
jQuery offers a plugin to do a replacement on checkboxes
You could always use the checkbox hack to make your own checkbox. This allows for a much more cross browser compatible solution.
I made a quick demo here, obviously you would have to get a transparent .png of a tick, not the one I got.
input[type=checkbox]:checked ~ div label{
background: url(http://ramyasspace.files.wordpress.com/2011/06/tick.jpg);
background-size: 100%;
}
input {
display: none;
}
label input[type=checkbox] ~ span {
display: inline-block;
vertical-align: middle;
cursor: pointer;
background: #fff;
border: 1px solid #888;
padding: 1px;
height: 20px;
width: 20px;
}
label input[type=checkbox]:checked ~ span {
/* image: Picol.org, cc-by 3.0, https://commons.wikimedia.org/wiki/File:Accept_Picol_icon.svg */
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M14 18L26 6l4 4-16 16L4 16l4-4z"/></svg>');
background-size: 100%;
}
<label>
Click me:
<input type="checkbox" />
<span></span>
</label>
I think the best you can do is give it a bigger font-size. From there it's up to how the browser handles it unless you make a mock div element that controls a hidden checkbox. It doesn't scale it up that much.
input[type="checkbox"] {
font-size: 50px;
}
I have used this library with sucess
http://plugins.krajee.com/checkbox-x
It requires jQuery and bootstrap 3.x
Download the zip here: https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master
Put the contents of the zip in a folder within your project
Pop the needed libs in your header
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="path/to/js/checkbox-x.min.js" type="text/javascript"></script>
Add the data controls to the element using the data-size="xl" to change the size as shown here http://plugins.krajee.com/cbx-sizes-demo
<label for="element_id">CheckME</label>
<input type="checkbox" name="my_element" id="element_id" value="1" data-toggle="checkbox-x" data-three-state="false" data-size="xl"/>
There are numerous other features as well if you browse the plugin site.
Styling checkbox's is a very wierd world full off cross browser issues. More info can be found here http://www.456bereastreet.com/lab/form_controls/checkboxes/ You can also create your own with javascript but this is not great for user accessibility.
So I would tray an avoid changing if possible.
Simply add background image to checkbox. And adjust the sizes as you prefer.
The code below automatically adds background when it's checked, and the size remains the same with unchecked status.
No need to specify like:
input[type=checkbox]:checked
or
input[type=checkbox]:checked ~ div label
For ex, all checkboxes:
input[type="checkbox"]{
background: url('http://refundfx.com.au/uploads/image/checkbox_full.png');
background-size: 20px;
background-repeat: no-repeat;
width: 20px;
height: 20px;
margin: 0;
}
See fiddle here.
Or simply style it with height and width like this:
<input style="height: 26px; width:26px; margin-left:-30px" value="" type="checkbox">
PS. I have used this with bootstrap and the "checkbox-inline" class
this will be quite difficult to explain. I hope I'm able to.
I recently created a custom ASP.net server control, representing a toolbar. The toolbar contains buttons, so HTML elements. To allow me to add an image I use CSS which add it to the background. The CSS which I apply on the input element looks like this:
.button{
padding: 2px 2px 2px 2px;
margin-right: 2px;
border: 1px solid #999;
cursor: pointer;
text-decoration: none;
color: #606060;
}
Moreover on the button itself (through the style tag; this is because these kind of buttons are rendered automatically and shouldn't be changed by the end-programmer) I have styles which define the background images and some additional settings
background-attachment:scroll;
background-image:url(images/select.png);
background-position:left center;
background-repeat:no-repeat;
padding-left:15px;
The padding-left is needed s.t. the text doesn't go behind the background image. So at the end you would have something like
<input type="submit" style="background-image: url(images/select.png); background-attachment: scroll; background-repeat: no-repeat; background-position: left center; padding-left: 15px;" class="button" id="someId" value="Save" name="someName"/>
On Firefox (as usual) everything works perfectly. My problem is that on IE (tested on IE 7 but I need to be compatible from IE 6+) it happens that if you enter a quite long text as the button text, the button will enlarge, basically the space before and after the button text increases with the size of the text. To have the button still immediately after the image I added the line text-align:right to the button class.
To illustrate it better...
On Firefox:
alt text http://img268.imageshack.us/img268/311/buttonfirefox.jpg
On IE:
alt text http://img23.imageshack.us/img23/2373/buttonie.jpg
Does anyone have any suggestion on how I could fix this??
//Edit:
What I could do of course is to specify a fixed width on the button, till it looks nicely. I would like to avoid this however, if possible.
This is an old bug. You need to add overflow:visible to the button. There is more here:
http://jehiah.cz/archive/button-width-in-ie
and here:
http://www.brandnewbox.co.uk/articles/details/removing_padding_from_ie_buttons/
Just try a css reset of submit button first (at the beginning of css file). For example margin, padding etc set to zero.
I am not quite sure how apply reset for submit buttons ..
but you can try following and test
/**
* Reset browser defaults
* Author: Tim Wright - csskarma.com
* Last updated: 04.19.2009
----------------------------------*/
body,div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,
blockquote,th,td { margin:0;padding:0; }
body { line-height:1;color:#121212;background:#fff; }
h1,h2,h3,h4,h5,h6,p { font-size:100%;font-weight:400; }
ol,ul { list-style:none; }
caption,cite,code,th { font-style:normal;font-weight:400; }
fieldset,img { border:0; }
caption,th { text-align:left; }
:focus { outline:1px dotted #eee; }
table { border-collapse:collapse;border-spacing:0; }
hr { border:0;border-top:1px solid #555;margin:0;height:1px; }
label,button { cursor:pointer; }
As per #Andrew's answer you can try * html input { overflow: visible; } also.