I'm trying to add an <input type="reset"> with a Font Awesome icon.
I can achieve this with a hyperlink or button but if I go down that route I need to use jQuery/JS to clear the form, which I'm trying to avoid for the time being.
I'm curious to whether it's possible to achieve the same results. Please see the JSFiddle to see what I mean.
Input Reset:
<input type="reset" class="btn btn-warning" value=""><i class="fa fa-times"></i> Clear</input>
<br/>
<br/>
Button:
<button class="btn btn-warning"><i class="fa fa-times"></i> Clear</button>
<br/>
<br/>
Anchor:
<i class="fa fa-times"></i> Clear
If there's no other way I will implement a jQuery solution.
<input> is self-closing tag, it's not allowed to have any other elements inside it.
Here are all the 3 possible options of doing it as inline icon.
JsFiddle demo
1. wrap the <i> and <input> button into a <span> tag, with some custom styles.
<span class="btn btn-warning">
<i class="fa fa-times"></i> <input type="reset" value="Clear"/>
</span>
span > i {
color: white;
}
span > input {
background: none;
color: white;
padding: 0;
border: 0;
}
2. use <button type="reset"> - recommended.
<button class="btn btn-warning" type="reset">
<i class="fa fa-times"></i> Clear
</button>
3. use <a> anchor tag + javascript
<a href="javascript:document.getElementById('myform').reset();" class="btn btn-warning">
<i class="fa fa-times"></i> Clear
</a>
https://jsfiddle.net/a6s58Luj/3/
<input type="reset" class="NEWCLASS btn btn-warning" value=" Clear" />
By adding value=" Clear" you can add the X icon. f00d is the icon HEX/whatever, which I got from inspecting the elements (checking the ::before's content). You might have to look into some additional styling, but it will work. Just remember to set the font.
If you need this inside a form , You cant make type="reset"
The best methoad i would say is, wrap the input element with label and apply all css to label. so any click on label will trigger input element also.
<label classname="all css of your button">
<input type="submit" value="submit">
<i class="fa fa-times"></i>
</label>
Related
Here is the code. There is a search bar where a user can put in a topic then select a button that shows different categories.
<form action="search.php" method="GET">
<i class="fas fa-search" aria-hidden="true"></i>
<input placeholder="Search" name="search" aria-label="Search">
<input type="submit" value="S" class="searchButton" name="submit-request"/>
<div class="buttons" style="text-align:center;">
<input type="button" class="spec" name="category1" value="category1">
<input type="button" class="spec" name="category2" value="category2">
<input type="button" class="spec" name="category3" value="category3">
<input type="button" class="spec" name="category4" value="category4">
<input type="button" class="spec" name="category5" value="category5">
</div>
</form>
This search form works perfectly fine with checkboxes. What should I do as an alternative? Is there a way I can style the checkboxes as buttons. If they are checkboxes how can I make it so that a user can only pick one category.
Use radio buttons.
Show name for radio with label.
To style a radio button, hide it, and add pseudo element.
<button> is it's own tag.
<button class="spec" name="category5">category5</button>
If you wanted to use CSS (you didn't tag it in your post), you can try this:
https://www.w3schools.com/css/tryit.asp?filename=trycss_form_button
<div class="navigation">
<input type="checkbox" class="navigation__checkbox" id="**navi-toggle**">
<label for="**navi-toggle**" class="navigation__button">
<span class="navigation__icon"> </span>
</label>
</div>
.navigation {
&__checkbox {
display: none;
}
&__button{
background-color: $color-white;
height: 7rem;
width: 7rem;
}
You say that you want to be able to still use checkbox as that is what functions... Well you could do so and use a label that is linked to that checkbox, and then simply style your label as your button.
I was trying to add all possible ways but without luck, this code is bit to hard for me, could any body help me.
How to add glyphicon glyphicon-search to <input style="width:10px" type="submit" class="btn btn-nomest" onclick="$('input:not(:submit,:button), select',this.form).val('');"
If I make another span its not working
Use <button> instead of <input type="submit">
<button
style="width:10px"
type="submit"
class="btn btn-nomest"
onclick="$('input:not(:submit,:button), select',this.form).val('');">
<i class="glyphicon glyphicon-search"></i>
</button>
I'm having trouble getting a glyphicon-search button to line up in bootstrap.
This is not a unique problem, I found this question that asks a similar thing, except the accepted and celebrated answer isn't working for me. Just like the answer, I have a div input group wrapper that should line up the field, but it isn't working, as you can see in my jsfiddle:
http://jsfiddle.net/pk84s94t/
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default glyphicon glyphicon-search input-sm" type="submit"></button>
</span>
<input type="text" class="form-control input-sm">
</div>
http://jsfiddle.net/kv8n7n5g/
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
<input type="text" class="form-control" placeholder="Search">
</div>
You had the glyphicon classes inside the button tag.
If that doesn't work you may have to change the line-height of the icon to 1. I was using ionicons and the 1.4... line-height was throwing everything off.
That's interesting. I've never tried using a button with an input group like that, and I'm not sure why that behavior is occuring. Seems to be an easy fix though.
I added top:0 to the existing rule .input-group-btn>.btn which already had position: relative; ...
http://jsfiddle.net/pk84s94t/1/
EDIT
While this does fix the behavior, Rachel S's answer is a better solution as it's not changing CSS rules, but using proper HTML within bootstrap to fix the problem.
The problem you are having is due to the glyphicon button default size in bootstrap. But if you put some text in the button it aligns perfectly as now the button for the text is given more priority than the glyphicon's default. For the text I used  . It works fine now.
<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> 
</button>
</span>
</div>
I use input-group in modal dialog. And the button is 1px less then other elements. How can I fix it, more then less why I have this bug? I use Bootstrap 3
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="buttons input-group col-sm-offset-1 col-sm-9">
<input type="number" min="1" value="1" class="form-control" />
<span class="input-group-addon">ks</span>
<span class="input-group-btn">
<button type="button" class="btn btn-default glyphicon glyphicon-remove color-red"/>
</span>
</div>
For me, the bug was because of a rounding error.
there's this style rule
.btn {
line-height: 1.42857;
}
which should be
.btn {
line-height: 1.42857143;
}
Turns out importing bootstrap within other SASS files resulted in a loss of precision. The SASS compile process needed the flag --precision 8 to work correctly.
For you, though, as noted in another answer, you just need to put your icon in another tag.
<span class="input-group-btn">
<button type="button" class="btn btn-default color-red">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
I encountered this today, and with a bit of googling and experimentation, it seems the correct way to use a glyphicon is to always use the icon class on it's own span, and not to combine it with other classes / components.
If your example; you would do the following:
<span class="input-group-btn">
<button type="button" class="btn btn-default color-red">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
With this there is no need to to any style changes.
It's caused by using a glyphicon on the button, and seems to be a bug with bootstrap. Use
.input-group-btn>.glyphicon {margin-top: -1px;}
to fix it.
http://fiddle.jshell.net/85m5mwsg/2/
Remove top of .glyphicon
http://jsbin.com/dufisukefe/3/edit
.input-group-btn .glyphicon
{
top :0px
}
I am looking to obtain the same style for both #html.ActionLink & a input submot control (both buttons) on a form. I basically want the input control to look the same the ActionLink control.
<div class="btn btn-success">
#Html.ActionLink("RSVP Now", "RsvpForm")
</div>
<div class="btn btn-success">
<input type="submit" value="Update RSVP" />
</div>
I want the bottom button to look the above button
(btn btn-sucess is from the bootstrap library)
<div>
<input class="btn btn-success" type="submit" value="Update RSVP" />
</div>
Provide the class inside the HTML Attributes parameter of the Html.ActionLink Method.
<div>
#Html.ActionLink("RSVP Now", "RsvpForm", new{#class="btn btn-success"})
</div>