I am using "#Html.ActionLink()" and used "text-decoration:none" in it. But still the link is showing underline for it.
Can anybody suggest solution for it to remove the underline.
Thanks,
Yuoraj
You can do it inline like this:
#Html.ActionLink(<your params>, new { style="text-decoration:none"})
but really you should be using a css file and a class:
#Html.ActionLink(<your params>, new { #class="myclass"})
where myclass looks like
a.myclass {
text-decoration: none;
}
UPDATE:
a.hprLnkmastercls {
text-decoration: none;
}
And if you don't want it underlined on hover
a.hprLnkmastercls:hover {
text-decoration: none;
}
In your .cshtml
#Html.ActionLink("Process", "Home" "WebsiteHome", new {}, new { #class = "hprLnkmastercls" })
will render as:
<a class="hprLnkmastercls" href="/WebsiteHome/Home">Process</a>
Related
I have this HTML element:
<button class="Button Button--is-primary Button--is-disabled Button--is-dark-theme">
And I need to defined in Scss a set of deep selectors like this:
.Button {
// Apply this for all Buttons that are dark theme
&--is-dark-theme {
// Apply this for all Buttons that are Dark AND are Primary
&--is-primary {
//...
}
}
}
But, my problem is that rule is going to create this:
.Button--is-dark-theme--is-primary
When I actually need:
.Button--is-dark-theme.Button--is-primary
I just found this:
.Button {
$self: &;
// Apply this for all Buttons that are dark theme
&--is-dark-theme {
// Apply this for all Buttons that are Dark AND are Primary
&#{$self}--is-primary {
color: red;
}
}
}
Which generates:
.Button--is-dark-theme.Button--is-primary {
color: red;
}
Any better option?
I'm using Material UI styling. it's my first time using that platform and it will be my last time. but for now, I'm stuck with it. so I have a question. I have something like:
.map(section => (
<Section className={classNames(classes.section, section.class)}>
<div className={classes.content}>
...
</div>
</Section>
))
where section names generally look like Section1, etc. I then want to style so I'm trying this:
{
section: {},
Section1: {
backgroundColor: 'black',
'& img': { ... }
content: { border: '1px solid pink' }
}
}
but the pink border is not getting applied and I can't figure out why
it appears the images get styled as expected, I see this in the generated code:
.makeStyles-Section1-415 {
content: [object Object];
}
.makeStyles-Section1-415 img {
margin-left: 400px;
}
from which it's obvious that the MUI class generator doesn't know how to produce the inner class name. obviously '& .content' wouldn't work either as the actual class name generated will look something like makeStyles-content-415
so what is the correct incantation to make this work?
p.s.
obviously I can do something heinous like:
{
Section1Content: {}
}
but if that's the correct answer it's a powerful reason to rip this styling system out completely
the answer is:
Section1: {
'& $content': { border: '1px solid pink' }
I was wondering if there was a way to change a button's style, in css, after it's been clicked, so not a element:active.
If you're looking for a pure css option, try using the :focus pseudo class.
#style {
background-color: red;
}
#style:focus {
background-color:yellow;
}
Each link has five different states: link, hover, active, focus and visited.
Link is the normal appearance, hover is when you mouse over, active is the state when it's clicked, focus follows active and visited is the state you end up when you unfocus the recently clicked link.
I'm guessing you want to achieve a different style on either focus or visited, then you can add the following CSS:
a { color: #00c; }
a:visited { #ccc; }
a:focus { #cc0; }
A recommended order in your CSS to not cause any trouble is the following:
a
a:visited { ... }
a:focus { ... }
a:hover { ... }
a:active { ... }
You can use your web browser's developer tools to force the states of the element like this (Chrome->Developer Tools/Inspect Element->Style->Filter :hov):
Force state in Chrome Developer Tools
It is possible to do with CSS only by selecting active and focus pseudo element of the button.
button:active{
background:olive;
}
button:focus{
background:olive;
}
See codepen: http://codepen.io/fennefoss/pen/Bpqdqx
You could also write a simple jQuery click function which changes the background color.
HTML:
<button class="js-click">Click me!</button>
CSS:
button {
background: none;
}
JavaScript:
$( ".js-click" ).click(function() {
$( ".js-click" ).css('background', 'green');
});
Check out this codepen: http://codepen.io/fennefoss/pen/pRxrVG
Try to check outline on button's focus:
button:focus {
outline: blue auto 5px;
}
If you have it, just set it to none.
What is the code of your button? If it's an a tag, then you could do this:
a {
padding: 5px;
background: green;
}
a:visited {
background: red;
}
A button
Or you could use jQuery to add a class on click, as below:
$("#button").click(function() {
$("#button").addClass('button-clicked');
});
.button-clicked {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Button</button>
If your button would be an <a> element, you could use the :visited selector.
You are limited however, you can only change:
color
background-color
border-color (and its sub-properties)
outline-color
The color parts of the fill and stroke properties
I haven't read this article about revisiting the :visited but maybe some smarter people have found more ways to hack it.
An easy way of doing this is to use JavaScript like so:
element.addEventListener('click', (e => {
e.preventDefault();
element.style = '<insert CSS here as you would in a style attribute>';
}));
all answers is true for hover, focus,...
if you want change background-color when you click and be stay that clicked state, you could do this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
<script>
const element = document.querySelector("body")
let taskDone = false
// function for show button
const elementShow = () => {
element.innerHTML = `
<button id="done-button" style="background-color : ${!taskDone
? "#4dd432" : "#fd67ad"};" onclick=doneTask()>
${!taskDone ? "Done" : "not done yet"}
</button>
`
}
elementShow()
// click Done button
const doneTask = () => {
taskDone = (taskDone ? false : true)
elementShow()
}
</script>
</html>
I want to Capitalize first letter only and other should be small using CSS
String is:
SOMETHING BETTER
sOMETHING bETTER
Something better
but the result should be
Something Better
Is this possible using CSS? To Capitalize first letter I am using
text-transform: capitalize;
But not able to capitalize in each case.
"I want to use CSS because in my application it has written every where hard coded but a class has been called everywhere."
you should be able to use the :first-letter pseudo element:
.fl {
display: inline-block;
}
.fl:first-letter {
text-transform:uppercase;
}
<p>
<span class="fl">something</span> <span class="fl">better</span>
</p>
yields:
Something Better
It is not possible with CSS alone but you can do it with Javascript or PHP for example.
In PHP
ucwords()
And in Javascript
function toTitleCase(str){
return str.replace(/\w\S*/g, function(txt){
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}
Extracted from
Convert string to title case with JavaScript
You can try a combination of this answer and some javascript (using jQuery)
HTML:
<div class='capitalize'>
SOMETHING BETTER
SOMETHING BETTER
SOMETHING BETTER
</div>
JAVASCRIPT:
$('.capitalize').each(function(){
var text = this.innerText;
var words = text.split(" ");
var spans = [];
var _this = $(this);
this.innerHTML = "";
words.forEach(function(word, index){
_this.append($('<span>', {text: word}));
});
});
CSS:
.capitalize {
text-transform: lowercase;
}
.capitalize span {
display: inline-block;
padding-right: 1em
}
.capitalize span:first-letter {
text-transform: uppercase !important;
}
Demo: http://jsfiddle.net/maniator/ZHhqj/
Why dont you just use the :first-letter pseudo element in css?
h2:first-letter{
text-transform: uppercase;
}
h2{
*your general code for h2 goes here;*
}
Yes, CSS is no help here. Welcome to the world of JavaScript, where anything is possible.
window.onload = function(){
var elements = document.getElementsByClassName("each-word")
for (var i=0; i<elements.length; i++){
elements[i].innerHTML = elements[i].innerHTML.replace(/\\b([a-z])([a-z]+)?\\b/gim, "<span class='first-letter'>$1</span>$2")
}
}
.first-letter {
color: red;
}
<p class="each-word">First letter of every word is now red!</p>
i'm making a workbook creator in C#.net ( using visual studio )
the book is build from the text part and the question part.
all the answers for the question are in side the text and the user need to click on the right answer.
if he's right then the word become green and if he's wrong it become red.
i'm using linkbutton for this and i need it to be without and "link" style.
i use this code for the question part:
public class question
{
public void createQusetion(Panel leftside, string text, string question,string answer)
{
string[] Qbuttonstext = text.Split(' ');
for (int i = 0; i < Qbuttonstext.Length; i++)
{
LinkButton answerButton = new LinkButton();
if (Qbuttonstext[i] == answer)
{
answerButton.ID = "answer";
}
else
{
answerButton.ID = "word" + i.ToString();
}
answerButton.Text = Qbuttonstext[i].ToString()+" ";
answerButton.CssClass = "textbuttonB4";
answerButton.Click += new EventHandler(checkAnswer);
leftside.Controls.Add(answerButton);
}
}
}
i used css stylesheet and used this code:
.textbuttonB4 a:link
{
style:none;
color:Black;
font-size:18px;
border-bottom-style:none;
background-color:transparent;
text-decoration: none;
}
.textbuttonB4 a:hover
{
style:none;
color:Black;
font-size:18px;
border-bottom-style:none;
background-color:transparent;
text-decoration: none;
}
.textbuttonB4 a:visited
{
style:none;
color:Black;
font-size:18px;
border-bottom-style:none;
background-color:transparent;
text-decoration: none;
}
when the code running the text is still appears as a link.
after looking the web for solution, dont konw why its not working.
sorry for the previous version of this question.
asaf
Check the output source. Does the button have the appropriate class? Did you remember to include the stylesheet?
Also, what does style:none; do? It's not valid CSS.