Using TB, is it possible to style the radio or checkbox so that it shows a glyphicon instead of the default style for radio or checkbox? I want to use a glyphicon glyphicon-star to indicate unchecked, then glyphicon glyphicon-star-empty to indicate checked.
Without javascript you could modify the style... Its kind of a hack in my opinion but it was interesting because I realized that boostrap uses an icon font #newb.
HTML
<input type="checkbox" class="glyphicon glyphicon-star-empty" >
CSS
.glyphicon:before {
visibility: visible;
}
.glyphicon.glyphicon-star-empty:checked:before {
content: "\e006";
}
input[type=checkbox].glyphicon{
visibility: hidden;
}
Try it out HERE
Just for those, having the same problem and came from Google (I didn't find any convenient answer).
I tinkered something like this and tested it in the current Chrome, Firefox and IE. With this method, you also can use everything else you want as checkbox. Just give the classes "checked" and "unchecked".
For every checkbox do this:
<input id="checkbox1" class="icon-checkbox" type="checkbox" />
<label for="checkbox1">
<span class='glyphicon glyphicon-unchecked unchecked'></span>
<span class='glyphicon glyphicon-check checked'></span>
Checkbox 1
</label>
And add to your CSS:
input[type='checkbox'].icon-checkbox{display:none}
input[type='checkbox'].icon-checkbox+label .unchecked{display:inline}
input[type='checkbox'].icon-checkbox+label .checked{display:none}
input[type='checkbox']:checked.icon-checkbox{display:none}
input[type='checkbox']:checked.icon-checkbox+label .unchecked{display:none}
input[type='checkbox']:checked.icon-checkbox+label .checked{display:inline}
On the official website, the javascript section has examples of styling groups of checkboxes and radio buttons as buttons groups. It's under the buttons section here.
Instead of having text inside the button that reads "Option 1", you would place your glyphicon instead. If you wanted only one checkbox, I suppose you could eliminate the button group and just go with a single button.
To remove the button appearance and only show your icon, use the "btn-link" class.
I haven't tried this myself, but I see no reason for it to not work.
Here is a pure angular solution to toggling between to glyphicon to conditionally show content on the page. I found the CSS solution to fail in IE.
This does more than your question, but I thought the toggling of something on the screen is useful.
<p ng-init="toggle = false" ng-click="toggle = !toggle" title="#Resources.Label_HideShowCustBiller" style="cursor:pointer" class="glyphicon" ng-class="{true: 'glyphicon-chevron-up', false: 'glyphicon-chevron-down'}[toggle]"></p>
<div ng-show="toggle">
//what you want to show here
</div>
Related
So, I have the IssuesList component, which is the list of issues that I get using ajax and github api, and DevStatus component, which sort of wraps the list up and contains all the logic, triggers state changes by two radiobuttons and so on.
My problem: When I click on one of the radiobuttons, the DevStatus component won't change state if the click was on the text inside the radiobutton. And when I click on the corners of the radiobuttons, the blue areas without text, the state changes perfectly.
Here's the structure of the radiobuttons:
<div className="btn-group" data-toggle="buttons">
<label className="btn btn-primary active"
onClick={this.onChangeRadioButton.bind(this)}
id={this.CLOSED_ISSUE_ID}>
<input type="radio" name="options"
autoComplete="off"
id={this.CLOSED_ISSUE_INPT_ID}
onChange={this.onInputChange.bind(this)} /> Closed Issues
</label>
<label className="btn btn-primary"
onClick={this.onChangeRadioButton.bind(this)}
id={this.OPEN_ISSUE_ID}>
<input type="radio" name="options"
autoComplete="off"
id={this.OPENED_ISSUE_INPT_ID}
onChange={this.onInputChange.bind(this)} /> Open Issues
</label>
</div>
Here's the codepen with the code and here's the full page view so you could better see and understand what I'm talking about.
Please, open the full page view and try to click on parts of the button that contain text and on ones that don't and you'll notice that as long as you click on parts without text - the state changes and if you click on text itself - the state doesn't change at all.
Could you please help me with that problem?
PS: removing onChange from the input element is not the solution.
Update 1
If you go to DevTools and inspect the radiobutton element, you'll see that inside the label tag there're input and weird span elements. The span element is not in the code I wrote, did React automatically add that? For some reason, the onClick event listener is not applied to those input and span elements.
Update 2
I've tried to add click event listener to the radiobutton in the console of dev tools and tried to figure out the target of the clicked element. When I click on the text - it is the span element and when I click on place without text - it is the label element and that's why the click event is not working.
Can my problem be solved using dangerouslySetInnerHTML, so that it won't create the unnecessary span?
Could you tell me please how to solve that?
React is creating a span because your text is not in any div. Also it would create a span if there was any white space (but in your case this is because there is no div around your text).
But the real problem here is the way you check your event. You need to check e.currentTarget instead of e.target
Then no need to use the ugly dangerouslysetinnerhtml!
React appeared to sometimes be adding span tags around text, no matter if there are the free white-spaces or not. The spans didn't allow the onClick event to fire when they were clicked on.
So, to force React not to render the spans, the dangerouslySetInnerHTML may be used:
noSpanRender(text) {
return { __html: `<input type='radio' name='options' autoComplete='off'/>${text}` };
}
render() {
return (
<div className="dev-status-page col-centered">
<div className="graphs">
<h1 className="text-center page-header">
Our Recent Closed and Opened Issues from GitHub
</h1>
</div>
<div className="issues col-centered">
<div className="btn-group" data-toggle="buttons">
<label className="btn btn-primary active"
onClick={this.onChangeRadioButton.bind(this)}
id={this.CLOSED_ISSUE_ID}
dangerouslySetInnerHTML={this.noSpanRender('Closed Issues')} />
<label className="btn btn-primary"
onClick={this.onChangeRadioButton.bind(this)}
id={this.OPEN_ISSUE_ID}
dangerouslySetInnerHTML={this.noSpanRender('Open Issues')} />
</div>
<IssuesList issues={this.state.issues} />
</div>
</div>
)
}
It was vital to avoid those span elements inside the input tag, so using dangerouslySetInnerHTML finally helped.
I have a button and on it I want to add two text labels whose font and size differ. I also want each text label to appear on its own line. For example, if my labels are ABCD and example, here's how I want them to appear on the button:
ABCD
example
Here is what I have tried. Is it possible to apply different styles to different parts of the value attribute?
<input style="width:170px; height:100px; font-size:90%; type="button" value="ABCD example">
You could use a button rather than an input and use two span tags inside. For example:
<button class="btn btn-primary" type="button">
<span style="font-size:14px;">ABCD</span>
<span style="font-size:10px;">example</span>
</button>
Live example at: http://jsfiddle.net/h6jq7ep2/
I've used inline styles just for simplicity, but obviously you could instead assign a class with the appropriate CSS to each span.
Try <button> element:
<button><span style="font-size:110%">ABCD</span> example</button>
It works about the same was as <input type="button">
you can not do this, you want to apply style on a part of the string, there is no simple way of doing this, you should use image instead. the is pure design purpose. just search online button image maker, you'll find a lot.
I'm new to Asp.net webforms, and still learning CSS. I am making a website which uses an html template I bought.
My problem is that the template makes use of tags, but I need to use Asp.net button controls. I tried to take the css classes and put them in my button control's CSSClass property, but it's not displaying right.
You can view an example here: [link removed since page is being taken down]
The green "Send Password" button is the and I want the other "Send Password" button (which is the .net control) to be styled the same way.
I've looked around and only find answers relating to overwriting how tags are rendered which I don't want to do right now. Is there an easy way to just make it look the same with CSS?
Thanks for any help!
Change from btn btn-default btn-clean to btn btn-success btn-clean in your asp:Button markup declaration. Either in the CssClass or css attribute.
The green style is applied by the .btn-success class:
.btn.btn-success.btn-clean {
border-color: #59AD2F;
background: transparent;
color: #59AD2F;
}
But your ASP.NET button is using the .btn-default class. Set it to .btn-success (probably in the CssClass="" property)
The easiest way to go about this is to just copy and paste the css from your purchased template into the Site.css file for your WebForms application.
For example, copy (from #LcSalazar's answer)...
.btn.btn-success.btn-clean {
border-color: #59AD2F;
background: transparent;
color: #59AD2F;
}
... into Site.css. btn btn-success btn-clean should appear as an option in the button properties CssClass drop down list.
Not the cleanest way to accomplish what you want, but definitely the fastest while still using the properties view. More information can be found here, starting with the "Creating and Using a Stylesheet" if you're interested in creating a tidier solution.
You can set in other button(white one) the same class as the green button which is .btn btn-success btn-clean:
<input type="submit" name="btnSendPasswordNew" value="Send Password" id="btnSendPasswordNew" class="btn btn-success btn-clean">
As shown here: http://msdn.microsoft.com/library/windows/apps/Hh465498
Do Mozilla and Webkit have equivalent options? The clear button on text inputs is good for touch screen apps. I don't want any JavaScript workarounds and an easy CSS fix would be very helpful.
I already know this is possible with JavaScript, but IE 10 has an inbuilt solution for displaying clear button, and I'm wondering if any other browsers have similar options?
The short answer is No.
There is no way to use CSS to generate a button that will clear the contents of an input without the use of JavaScript.
The clear button is built in functionality to IE10. -ms-clear is not what generates it, but simply a way to target it for styling.
I should mention though, that the <input type=search> field in Chrome will give you a clear button as well, but not on normal <input type=text> fields.
Was looking for same issue so I made a jQuery plugin (TextClear) to offer the same feature :
here is the download link
and about trick behind this:
set background image on input text field and position it to the right corner like
{
background-image: url('imagesUrl');
background-repeat: no-repeat;
background-position: right center;
background-size: 10% 90%;
padding-right: 1%;
}
And then handling click event on it by mapping its position (you can check the source code as well for detailed logic)
You cannot actually do this using css..
But you can user jQuery, and its simple. All you gotto do is this...
HTML code:
<form id="myform" method="post">
<input type.... />
<input type.... />
<input type.... />
<input type="button" id="clear" name="clear" />
</form>
jQuery Code:
$("#clear").click(function(){
$("#myform").reset();
});
And this will work.. But the form tag is necessary.
Y U NO like Javascript? Look how easy jQuery makes this process:
Markup
<form>
<input type="text">
<button>X</button>
</form>
jQuery
$("form").on("click", "button", function() {
$("input").val("");
return false;
});
http://jsfiddle.net/QyE92/
With CSS, you can style the button and position it appropriately to mimic the "x" in the metro interface almost exactly.
Can I hide the borders of the searchbox ? I would like it completely white, just the text should be visible. And I need a solution for all browsers.
See the picture:
http://dl.dropbox.com/u/72686/searchBox.png
you can add this
<input name="textfield" type="text" class="hide_border" id="textfield" />
css
.hide_border{
border:none;
*border:solid 1px #FFF;
}
By using a standard checkbox I am not sure whether you get this effect in a cross browser way. You can use a custom element and make it act like a checkbox using CSS and javascript.
See this one which uses jquery
Fancy custom radio and checkbox
I'm not sure if I understand correctly. Why don't you just hide the checkbox and leave the label ? (Later using javascript and such you can redisplay the checkbox)
Checkboxes can not be styled in all browsers. The common solution is to use two images, toggling between the two when clicked (and updating a hidden field as necessary).
<style>
.inputsearch input
{
background-color: #FFF;
border: none;
}
</style>
<div class="inputsearch" style="text-align:left;">
<input type="text" value="HEy there ">
</div>
Styling checkboxes isn't doable in a crossbrowser fashion without some jQuery, have a look at this: Custom checkboxes with jQuery. It's the only way to do it, standard checkboxes cannot be styled in all browsers.