Anyone knows why the font of this elements are not the same?
Using Anchor Element
<a style="font-weight: bold; ">bold</a>
Using Input Button
<input type="submit" value="bold"
style="font-weight:bold; border: none; background-color: transparent" />
That's because the font-family and font-size are different too:
see
http://jsfiddle.net/RQBr3/
vs
http://jsfiddle.net/RQBr3/1/
with font-size and font-family added.
Related
I'm trying to set a monospace font to an input, but when autofill kicks in, and switching between autofill dropdown menu options, the font family within that autofill state of the text input doesn't appear as the specified monospace font, please refer to this code and change font family to monospace to portray my issue(I'm using Chrome btw):
Codepen example by CSS tricks
/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid green;
-webkit-text-fill-color: green;
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
transition: background-color 5000s ease-in-out 0s;
}
/* PRESENTATIONAL STYLES */
body {
background: #333;
color: #fff;
display: flex;
font-family: monospace;
font-size: 3em;
justify-content: center;
}
form {
padding: 50px 0;
width: 50%;
}
<form>
<div class="form-group">
<label for="exampleInputFirst">First Name</label>
<input type="text" class="form-control input-lg" id="exampleInputFirst">
</div>
<div class="form-group">
<label for="exampleInputLast">Last Name</label>
<input type="text" class="form-control input-lg" id="exampleInputLast">
</div>
<div class="form-group">
<label for="exampleInputEmail">Email Address</label>
<input type="email" class="form-control input-lg" id="exampleInputEmail">
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
</form>
The solution here is input:-webkit-autofill::first-line selector.
It allows you to override default system font (and font size) during mouseover on autocomplete elements.
Here is my partial answer in hopes of helping:
I am having the same problem in Chrome, where I would like to change the font-family inside the input text area on hover of the auto-fill options, but it seems like it's the one thing that won't change.
From my experimenting with changing the autocomplete styles in WebKit, as described in the CSS tricks tutorial and in your code snippet, I can change the border styles, the box-shadow styles, even the font-weight and font-style.
Because I am able to change the other properties of the font inside the text input area on hover, but not the font-family, I'm led to believe that this is either intentional or a bug by Chrome. I also noticed the example on CSS tricks behaves the same way: the font-family is the default on hover, but switches to Lato after it's selected. So, I believe this is expected with Chrome. If I could find some explicit documentation that font-family is not allowed to be changed here, I would be more satisfied, but this is the most I could conclude.
My existing web application uses css div class="medBlutext" for the texts:
.medBluText {font: 0.7em Book Antiqua, Georgia, Times New Roman, serif; font-size: 12px; color: #0000ff;}
When I use this div tag next to a button or other form field like this:
<tr>
<td align="Right"><div class="medGreyTextbold">Subject</div></td>
<td>
<input type="text" name="Email_Subject" value="" class="inputReqText" Required="True">
<input type="submit" name="emailsend" value="S E N D" class="SubmitButtons">
<cfif IsDefined("url.err")><div class="medBluText"><cfoutput>#url.err#</cfoutput></div>
</td>
</tr>
The error message which is in url.err does not appear at the same line as the submit button but it appears below the submit button. Like there is a break tag after the submit button. if I don't use the div tag the message appears next to the send button but I need to make the text appear the same throughout so I need to use the div tag. How can I still use this div tag and make the text appear at the same line?
Your CSS style only has font properties, there's nothing that prevents you from using it on other elements like a span. The difference in styling that you're seeing is that a div is a block level element. It will always take up the full width of it's containing element. Which means it is going to start on a new line. Use an inline element like a span instead. Since your style is not using a property like margin and only font properties both elements should display the same.
.response-text {
color: #0000ff;
font: 12px 'Book Antiqua', Georgia, 'Times New Roman', serif;
}
<label for="subject">Subject</label>
<input type="text">
<span class="response-text">Some error occurred</span>
You can also set the div to display: inline; to make it behave like an inline element like a span.
FWIW I would look at using a different naming convention for CSS classes that doesn't use specific property values like blue. See my example above. Now, if the text color ever changes to red, you don't have an element displaying red text with a class of .medBlueText.
You might want to move away from tables for your form. Not mandatory but they're a lot less flexible than using divs. You might even want to work in flexbox.
<div> is a block level element which will break into a new line. Use display:inline-block instead.
.medBluText {
font: 0.7em Book Antiqua, Georgia, Times New Roman, serif;
font-size: 12px;
color: #0000ff;
display:inline-block;
}
<table>
<tr>
<td align="Right"><div class="medGreyTextbold">Subject</div></td>
<td>
<input type="text" name="Email_Subject" value="" class="inputReqText" Required="True">
<input type="submit" name="emailsend" value="S E N D" class="SubmitButtons">
<cfif IsDefined("url.err")><div class="medBluText"><cfoutput>#url.err#</cfoutput></div>
</td>
</tr>
</table>
I've a div with text in div.But the weird behavior occurs when glyphicon is added,that is spacing between the words has become more.
How to avoid this ?
<div class="glyphicon glyphicon-chevron-up">With glyphicon</div>
<div>Without glyphicon</div>
Demo of the issue
Demo of Implementation in my application
This one works...
<div class="glyphicon glyphicon-chevron-up"></div>With glyphicon
<div>Without glyphicon</div>
If you can't use this then use this one :
<div class="glyphicon glyphicon-chevron-up" style="color: steelblue;font-size: initial;" data-toggle="collapse" href="#new"></div><span style="color: steelblue;font-size: initial;" href="#new">
Glyhicon div with collapse</span>
<div class="collapse in" id="new">
Something goes here
</div>
Then you only have option to click on icon to toggle.
You can add a span for the Glyphicons
<div><span class="glyphicon glyphicon-chevron-up"></span>With glyphicon</div>
<div>Without glyphicon</div>
It works well and its a good practice to add a separate span for the glyphicons.
What is happening in your code is that the glyphicon class property is being applied to the content that you are writing within the div tag.
glyphicon class applies the font-family : 'Glyphicons Halflings' in which the symbol can be rendered. But you have added your text inside same <div>. So that font will be applied to your text too. I have moved the text to another <span> and applied the desired font-family : 'sans-serif' to the text.Which solves the issue OR simply move your text out of that <div>, that too will work
With glyphicon
Without glyphicon
New Class
.newFont{
font-family: sans-serif
}
JdFiddle
If you want to avoid the text and you want to write text inside glyphicon you should add to bootstrap glyphicon class the before attribute so it gives effect only to the before like this :
/*add the :before to glyphicon */
.glyphicon:before {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
All,
I need to have any input validation messages display below the element instead of next to it. The base CSS file puts a margin-bottom = 19px on the <input /> element so I need to offset this because if I don't the message gets inserted 19px below the input element.
Example:
http://jsfiddle.net/L28E7/2/
ASP.NET is generating all of the HTML so I am hamstrung somewhat in terms of what I can do.
I can access the .field-validation-error class and override it so that's what I did.
My CSS works (In FireFox at least) and produces the following:
I had to use negative margin-top to get the message right under the element, which I am not happy with.
How can I improve this?
Thank you!
The CSS
div .field-validation-error {
color: #C1372A !important;
display: block;
font-weight: normal !important;
margin-top: -19px;
margin-bottom: 10px;
}
The HTML
<div>
<label for="NewClub.NewClubName">Name your club!!!</label>
<span class="required">*</span>
</div>
<input type="text" value="" name="NewClub.NewClubName" id="NewClub_NewClubName" data-val-required="Please provide your club with a name." data-val="true" class="text-box single-line">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="NewClub.NewClubName"></span>
if this is how your HTML looks after the creating of inline error message
<input type="text" value="" name="NewClub.NewClubName" id="NewClub_NewClubName" data-val-required="Please provide your club with a name." data-val="true" class="text-box single-line">
<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="NewClub.NewClubName">heloo hell</span>
Then use the below css. This will automatically put your message below the text box
.field-validation-error {
color: #C1372A !important;
display: block;
font-weight: normal !important;
}
Here is the fiddle
http://jsfiddle.net/L28E7/
Using the markup below, the button text is underlined when hovered over. How can I get rid of that behavior?
Is there a better way to add links to a btn-group in bootstrap that avoids this behavior?
<a href="#">
<div class="btn-group">
<button class="btn">Text</button>
<button class="btn">Text</button>
</div>
</a>
Tested CSS lines:
a:hover .btn-group { text-decoration: none }
a .btn-group:hover { text-decoration: none }
a:hover .btn-group .btn { text-decoration: none }
a .btn-group .btn:hover { text-decoration: none }
Any additional !important does not work, either (suggested by baptme).
Bootstrap 4+
This is now easy to do in Bootstrap 4+
<a href="#" class="text-decoration-none">
<!-- That is all -->
</a>
{ text-decoration: none !important}
EDIT 1:
For you example only a{text-decoration: none} will works
You can use a class not to interfere with the default behaviour of <a> tags.
<a href="#" class="nounderline">
<div class="btn-group">
<button class="btn">Text</button>
<button class="btn">Text</button>
</div>
</a>
CSS:
.nounderline {
text-decoration: none !important
}
Buttons with the btn class do not have underlines unless you are doing something wrong: In this case nesting <button> inside of <a>†.
Something that I think you might be trying to do, is to create a bootstrap button without any decorations (underline, outline, button borders, etc). In other words, if your anchor is not a hyperlink, it is semantically a button.
Bootstrap's existing btn class appears to be the correct way to remove underline decorations from anchor buttons:
Use the button classes on an <a>, <button>, or <input> element
EDIT: Hitesh points out that btn will give you a shadow on :active. Thanks! I have modified my first example to use btn-link and incorporated the accepted answer's text-decoration: none to avoid this problem. Note that nesting a button inside of an anchor remains malformed html†, a point which isn't addressed by any of the other answers.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<div>
<!-- use anchors for borderless buttons -->
Text
Text
</div>
Alternatively, for a regular button group using anchors:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<div class="btn-group">
<!-- use anchors for borderless buttons -->
Text
Text
</div>
In other words, it should not be necessary to introduce your own nounderline class and/or custom styling as the other answers suggest. However, be aware of certain subtleties.
† According to the HTML5 spec, <a><button>..</button></a> is illegal:
Content model:
Transparent, but there must be no interactive content descendant.
...
Interactive content is content that is specifically intended for user interaction.
a, audio (if the controls attribute is present), button, embed, iframe, img (if the usemap attribute is present), input (if the type attribute is not in the hidden state), keygen, label, object (if the usemap attribute is present), select, textarea, video (if the controls attribute is present)
P.S. If, conversely, you wanted a button that has underline decorations, you might have used btn-link. However, that should be rare - this is almost always just an anchor instead of a button!
Why not just apply nav-link class?
<a href="#" class="nav-link">
a.btn {
text-decoration: none;
}
The problem is that you're targeting the button, but it's the A Tag that causes the text-decoration: underline. So if you target the A tag then it should work.
a:hover, a:focus { text-decoration: none;}
If you are using Less or Sass with your project, you can define the link-hover-decoration variable (which is underline by default) and you're all set.
a:hover, /* OPTIONAL*/
a:visited,
a:focus
{text-decoration: none !important;}
Easy way to remove the underline from the anchor tag if you use bootstrap.
for my case, I used to like this;
<a href="#first1" class=" nav-link">
<button type="button" class="btn btn-warning btn-lg btn-block">
Reserve Table
</button>
</a>
add the Bootstrap class text-decoration-none to your anchor tags
<a href="#" class="text-decoration-none">
<div class="btn-group">
<button class="btn">Text</button>
<button class="btn">Text</button>
</div>
</a>
a:hover{text-decoration: underline !important}
a{text-decoration: none !important}
.btn is the best way, in modern website, it's not good while using anchor element without href so make the anchor tag to button is better.
just use bootstrap class "btn" in the link it will remove underline on hover
Add this css code to your css file:
a.btn { text-decoration: none !important; }
Use the a tag:
Login