This question already has answers here:
Detect if an input has text in it using CSS -- on a page I am visiting and do not control?
(18 answers)
Closed 4 years ago.
Is there a way to change the colour of the submit button when text is entered? Didn't know if this was possible without the use of JavaScript (not a very proficient coder!).
CSS:
#a {
padding: 1px 3px 0px;
background: transparent;
border: 0;
outline: 0;
border-bottom: 0.8px solid #D3D3D3;
width: 300px;
height: 32px;
}
.bttn {
background-color: #FF0783;
border: none;
color: #ffffff;
text-align: center;
text-decoration: none;
font-size: 24px;
width: 216px;
height: 48px;
border-radius: 38px;
text-transform: none;
}
HTML:
<div style="text-align: center;"><input type="text" id="a" style="text-transform:uppercase; font-family: open-sans, sans-serif; font-style: normal; font-weight: 300; color: black; font-size: 24px; text-align: left;" maxlength="8" autofocus></div>
<div class="sbmt">
<button type="submit" class="bttn">Continue</button>
</div>
Nope this is not possible through CSS. CSS has no (pseudo) selectors for value(s). Possible duplicate of this.
You can use js for change the submit class, or with jquery. Is easy:
$('#id').removeClass('class');
$('#id').addClass('class');
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 months ago.
Improve this question
I've tried the codes for creating a glowing button on my webpage, but It's been done, below are some code which I tried.
.button {
background-color: #1c87c9;
-webkit-border-radius: 60px;
border-radius: 60px;
border: none;
color: #eeeeee;
cursor: pointer;
display: inline-block;
font-family: sans-serif;
font-size: 20px;
padding: 5px 15px;
text-align: center;
text-decoration: none;
}
<button class=""> Hello World! </button
Please do help me to create this glowing button.
change <button class=""> Hello World! </button
to <button class="button"> Hello World! </button>
The css .button selector is looking for the class="button". The . denotes class. Read more here
If you want gradient glowing button you should use:
background-image: linear-gradient(firstcolor, secondcolor);
you could also add:
box-shadow: 1px 1px 10px yellow; (or any color that you want)
In your CSS you're targeting a class name of "button", but your button has no class name! Try assigning the button a class name and then use that name in the CSS, like so:
.myButton {
background-color: #1c87c9;
-webkit-border-radius: 60px;
border-radius: 60px;
border: none;
color: #eeeeee;
cursor: pointer;
display: inline-block;
font-family: sans-serif;
font-size: 20px;
padding: 5px 15px;
text-align: center;
text-decoration: none;
}
<button class="myButton"> Hello World! </button
class value of the button is missing, also css must be in
<style> .button{...} </style>
.button {
background-color: #1c87c9;
-webkit-border-radius: 60px;
border-radius: 60px;
border: none;
color: #eeeeee;
cursor: pointer;
display: inline-block;
font-family: sans-serif;
font-size: 20px;
padding: 5px 15px;
text-align: center;
text-decoration: none;
}
<button class="button"> Hello World! </button>
Use button instead of .button.
button {
background-color: #1c87c9;
-webkit-border-radius: 60px;
border-radius: 60px;
border: none;
color: #eeeeee;
cursor: pointer;
display: inline-block;
font-family: sans-serif;
font-size: 20px;
padding: 5px 15px;
text-align: center;
text-decoration: none;
}
<button>Hello World</button>
I want to represent a text like below image, how can i do this using CSS and HTML?
Custom Text Representation Image
Note: This is not text input field. I just want to display the text.
please try the below code.
<style>
.text-content{
position: relative;
border: 5px solid;
border-radius: 20px;
padding: 20px 0;
}
.text-content span{
position: absolute;
background: #fff;
left: 25px;
top: -18px;
padding: 0 10px;
font-size: 22px;
}
</style>
<h1 class="text-content">
<span>TV NAME</span>
ANDRIOD TV ROOM 1
</h1>
Try this one also. I think it's perfect for you.
fieldset {
width: 500px;
border-radius: 15px;
border: 5px solid #000000;
}
legend {
font-size: 18px;
font-weight: bold;
color: #000000;
}
span {
display: block;
text-align: center;
padding: 20px;
font-size: 22px;
font-weight: bold;
color: #000000;
}
<fieldset>
<legend>TV NAME</legend>
<span>ANDRIOD TV ROOM 1</span>
</fieldset>
You can use The HTML fieldset element:
<fieldset>
<legend>TV NAME</legend>
ANDRIOD TV ROOM 1
</fieldset>
This question already has answers here:
How to remove the border highlight on an input text element
(21 answers)
How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]
(11 answers)
Closed 6 years ago.
I've a text area in my html, and this has rounded edges. but when I click inside the text area, it is showing a rectangle around the rounded edges.
Below is my HTML.
<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" onclick="TextAreaToggle()" style="margin: 0px 0px 0px -50px; width: 490px; height: 41px;"></textarea>
and here is my CSS
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
}
working fiddle https://jsfiddle.net/jrss9192/1/
Just remove the outline
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
outline: 0;
}
The rectangle that you are seeing is a browser-default outline. While its not a good idea to remove browser default styles, it can be done by declaring outline: none;
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
outline: none;
}
<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" style="margin: 0px 0px 0px -50px; width: 490px; height: 41px;"></textarea>
Use: outline: none when the textarea is focused
textarea:focus{
outline: none;
}
That's outline of textarea appears on focus just set outline:0; on .Textareausermsg
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
outline:0;
}
<textarea placeholder="Enter Text Here..." id="usermsg" class="Textareausermsg" style="width: 260px; height: 41px;"></textarea>
The rectangled area is called "outline" and it's a css property.
Try add outline: none; in your css code to remove it.
If you want a "blue border" when you click / focus the element, try this
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
outline: none;
}
.Textareausermsg:focus, .Textareausermsg:active {
border:1px solid blue;
}
https://jsfiddle.net/jrss9192/2/
Here is the solution to your question.
.Textareausermsg {
border-radius: 15px;
font-size: 15px;
text-align: left;
line-height: 34px;
outline: none;
}
.Textareausermsg :active , .Textareausermsg :focus { outline:none}
I'm new to HTML and CSS. I have a default button working well in HTML, but I would like to change its appearance without changing its functionality at all.
This is my code in HTML:
<a><input type="submit" class="save btn boton-no" value= "HECHO"><a/>
And this one is the style I would like the button to have, is my CSS file:
#boton-no{
color: #AF1C24;
font-family: "Roboto";
font-size: 30pt;
text-align: center;
border: 1px solid;
border-radius: 10px;
width: 25%;
padding-right: 40px;
padding-left: 40px;
padding-top: 20px;
padding-bottom: 20px;
margin-left: 35%;
margin-right: 35%;
}
How can I apply this style to my button? I've tried several things like changing the "id", the "style", ... but the button doesn't change its appearance or it changes both its style and functionality...
Could you help me, please?? Thank you very much!!
You can do this with simplified CSS. Also the hashtag symbol targets ids, not classes.
#boton-no{
color: #AF1C24;
font-family: "Roboto";
font-size: 40pt;
border: 1px solid;
border-radius: 10px;
padding: 20px 40px;
display: block;
margin: 0 auto;
}
<input type="submit" class="save btn" id="boton-no" value= "HECHO" />
The selector #boton-no applies to an element with id=boton-no. You should be using class sector, which look like this: .boton-no. The style is applied to all elements which have the button-no class. So your CSS should be looking like this:
.boton-no {
color: #AF1C24;
font-family: "Roboto";
font-size: 30pt;
text-align: center;
border: 1px solid;
border-radius: 10px;
width: 25%;
padding-right: 40px;
padding-left: 40px;
padding-top: 20px;
padding-bottom: 20px;
margin-left: 35%;
margin-right: 35%;
}
You can read more about CSS selectors here.
I have the simple form and attached the css file for that. As you can see there are 2 fields and one checkbox - I would like to make the checkbox directly under the textarea, with around 1-2px space, not as it is now - how can I modify that? I thought the problem is somewhere here:
.textox, .textoxarea {
width: 340px;
border: solid 1px #999999;
padding: 2px;
border-radius: 4px;
font-size: 14px;
box-shadow: 0px 1px 2px 0px #9C9C9C;
background-color: #FFFFFF;
outline: none;
color: #474747;
text-align: center;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 100;
}
but I can't find the proper way of doing that.
Here's my fiddle.
Thanks!
Remove the empty paragraphs between textarea and checkbox.
In your fiddle it's on lines 11 and 13.
http://jsfiddle.net/7hq0x6u4/3/
.center p:nth-of-type(2),.center p:nth-of-type(3){
margin:0;
}
This will reduce the space of margin in both the P tags which are covering the input elements
DEMO
Normally use of p tags to align input tags are not recommended.
Hi to your <input type="checkbox"> add these styles.
.foo {
bottom: 1px;
margin-left: 0;
margin-right: 5px;
position: relative;
}
.foo as an example class on checkbox.