I used this html code to show a color of a project:
<span class="glyphicon glyphicon-folder-open" data-ng-style="{'color': projectUserConnection.project.color}"></span>
now I will provide to change the color in that way that if glyphicon is clicked a color chooser should be opened. Does anyone know how to include or something else
<input type="color">
into the span or how I can do it?
try this: JSCOLOR
CODE
You can find all information on their site by the way for make the answer complete i add there the example code from the site that i think you will need to use.
<script src="jscolor.js"></script>
<p>You can add the color picker to a BUTTON:
<button class="jscolor {value:'66ccff'}"></button>
<p>... which might be empty to just display the color:
<button
class="jscolor {valueElement:null,value:'66ccff'}"
style="width:50px; height:20px;"></button>
<p>... and can be styled too:
<button
class="jscolor {valueElement:null,value:'66ccff'}"
style="border:2px solid black">
Pick a color
</button>
Please tell me if this is something that can help you!
<span class="glyphicon glyphicon-user" style="color:blue"></span>
HTML
<span class="glyphicon glyphicon-user blue"></span>
CSS
.blue {
color: blue;
}
Related
I am using the following code for making a button that looks like the glyphicon:
<button type="submit" class="btn btn-link">
<span class="glyphicon glyphicon-triangle-top" style="font-size: 20px;">
</span>
</button>
When I click on the button, a box appears around the glyphicon (following image) which is not desirable to me. How can I make this box invisible or even make it smaller?
For example in stackoverflow, such a box does not exist when you click on vote-up (which you can do right away on this post ;) )
Please help. Thanks in advance.
Set box-shadow and outline to none when focused.
.btn-link.btn:focus {
box-shadow: none;
outline: none;
}
I have a link styled as follows:
<style>
.addNew{
background-color: #FFF;
display: block;
margin-top: 10px;
padding: 20px;
color: #08c;
border:3px dashed #08c;
cursor: pointer;
width: 100%;
box-sizing: border-box;
font-size: 1em;
}
</style>
<a class='addNew'>
<i class="fa fa-plus" ></i> Add new
<span style='text-decoration:underline'>Object</span>
</a>
I am using a span-tag inside the text and a font-awesome icon.
How can I use this for an submit button? I tried this:
<input type='submit' class='addNew' value="Add new Object">
But I have no idea how to style the text of the submit button.
Use a button element.
<button class='addNew'>
<i class="fa fa-plus" ></i> Add new
<span style='text-decoration:underline'>Object</span>
</button>
… then you can have child elements and target them independently for styling.
You can use <button>
<button><i class="fa fa-plus"> Add new <span style="text-decoration:underline;">Object</span></button>
Button behaviour is different then <input type="button"> or <input type="submit">. You can append elements in <button>.
You can also use <button> tag for submit. You need to also give the button a type of submit to capture the browser event.
<button type="submit">
<a>link</a>
<span>span</span>
</button>
EDIT: Why you should specify type of submit
<form>
<input />
<button type="button">not a submit button</button>
<button type="submit">submit button</button>
</form>
In this case, anyone looking at your code will know exactly which <button> is the actually submit button in a second. Also, if someone is going to get the form's submit button with CSS selector, one can easily do so by button[type="submit"]. Yes submit is the default type, but it is also the better practice for readability and easier for debugging.
I am trying to incorporate ZocialCSS buttons in my site but the color of the background changes automatically to white when I insert them instead of retaining the rest of the buttons default color.
<div className="form-group">
<div className="col-sm-offset-2 zocial facebook">
<button class="zocial facebook">
Sign in with Facebook
</button>
</div>
</div>
I works in JSFiddle: http://jsfiddle.net/Bc6Et/, but in my computer, the class part is ignored, so I just get a plain HTML button.
Here is a picture of what it looks like when I write the zocial facebook within the className part:
Everyone is saying I should use class instead of className, but it gets ignored wherever I substitute it. Does anyone know why?
Additional comments
I am using React.
I have a index.html file that calls a js file, containing a render function with the above HTML code in it.
ANSWER
Incluiding className within button worked perfectly:
<div className="form-group">
<div className="col-sm-offset-2">
<button className="zocial facebook">
Log in with Facebook
</button>
</div>
</div>
You need your CSS to affect the <button> within your <div>.
Also, it should be class instead of className
<div class="zocial facebook">
<button>Log in with Facebook</button>
</div>
CSS:
.zocial.facebook button {
background-color: #somecolor
}
Or simply put the same class to the button as well as the div:
<div class="zocial facebook">
<button class="zocial facebook">Log in with Facebook</button>
</div>
First you should use "class=" not "className="
If background color is still imported after correcting, you can do the following:
you can override css by adding element styles
<div class="zocial facebook" style="background: none">
or
<div class="zocial facebook" style="background-color: rgba(0, 0, 0, 0);">
you can also rewrite the css for .zocial facebook by targeting it in a style tag
<style>
.zocial facebook {background: none; background-color: rgba(0,0,0 0);}
</style>
ANSWER Incluiding className within button worked perfectly:
<div className="form-group">
<div className="col-sm-offset-2">
<button className="zocial facebook">
Log in with Facebook
</button>
</div>
</div>
How would I change the color of one word in the button?
I've tried using <input type="submit" value="lool <span style='color: red'>lool2</span"> but it just shows the code instead.
Give it a span and give the span a specific color.
HTML:
<button type="button">
<span class="color">Click</span>Me!
</button>
CSS:
.color{
color: red;
}
Try this:
<button>One<span style="color: red">Two</span></button>
I am buiding a web page with knockout 3.0.
All I want to do is to create a bootstrap list with badge, see example and code below
However, when I do it in the knockout template binding like this
<script type="text/html" id="document-template">
<li class="list-group-item" data-bind="text: Caption">
<span class="badge" data-bind="text:PageCount"></span>
</li>
</script>
the page looks like, no span
If I move the span tag outside the li tag like this
<script type="text/html" id="document-template">
<li class="list-group-item" data-bind="text: Caption"></li>
<span class="badge" data-bind="text:PageCount"></span>
</script>
I could see my span text - for sure it has wrong css
My question is 1) does knockout just not like one tag inside aonther one?
Or 2) did I do something wrong, if I am wrong, could you please give me some suggestion?
Thanks
It is overwriting the contents of your LI element with the text binding. Just put two spans inside your LI:
<script type="text/html" id="document-template">
<li class="list-group-item">
<span class="badge" data-bind="text:Caption"></span>
<span class="badge" data-bind="text:PageCount"></span>
</li>
</script>
This line...
<li class="list-group-item" data-bind="text: Caption">
replaces the following
<span class="badge" data-bind="text:PageCount"></span>
This worked for me too, here my example:
before (in this button, the font awesome icon was overwritten, and just text was rendered):
<button class="btn btn-primary" data-bind="text:toggleButtonText(), enable:isShowAllRequired(), click:toggleIsShowAll">
<i data-bind="css:getShowallIcon()"></i>
</button>
After (with the extra span suggested above, it renders icon + text):
<button class="btn btn-primary" data-bind="enable:isShowAllRequired(), click:toggleIsShowAll">
<i data-bind="css:getShowallIcon()"></i>
<span data-bind="text:toggleButtonText()"></span>
</button>