I have a form and the form has a submit button with html code like this:
<input type='Submit' name='sel' value='Submit Here'>
I want the word "Submit" to have font-size of 10px and black color while the word "Here" to have font-size of 12px and red color. Is it doable without using back-ground image?
No, you can't do that. Whatever style you add to the input element will be applied to the whole text, you won't be able to select individual characters. However, you can use a different element that supports content, such as a button, where you can add the content you want and style it...
<button type="submit">
<span class="black">Submit</span> <span class="red">Here</span>
</button>
And then apply the styles...
span.black {font-size:10px;color:black}
span.red{font-size:12px;color:Red}
An example below...
JS Fiddle Example
Related
How to make icon/image to be used as submit button (input)? I mean I have tried input type "image" but then I had white background around the envelope that I want to be my submit button. I would prefer to use '✉' code but I can't get rid off the background around it.
I am using code like this now but it really isn't really what I want
<input name="send" value="✉" type="submit">
that is how it look right now
You can use <input type="image"> , more info at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image
You could use the with a a class to apply the background image
<button class="mybgImage"></button>
With the CSS..
.mybgImage {
width: 40px;
height: 30px;
background-image {'theNameOfMyBackgroundImage.png'}
}
COUNTER COUNTER EDIT:
Sorry for obvious question, my edits keep getting deleted but was just saying been working non stop and had a complete blank when trying to remember this, thanks to the Stack community though!
I have my HTML here:
<input type="submit" name="buddy1" value="Yes" placeholder="Toggle Yes">
I want the input value to be Yes but the text displayed to be "Toggle Yes". I know there's a trick with span classes and buttons but I want the button to also be the submit. Is there a quick way of doing this WITHOUT Javascript?
You can use the <button></button> instead:
<button type="submit" name="buddy1" value="Yes">Toggle Yes</button>
Your should use a button element, where you can change the text of the button. Buttons elements are just input elements which have more options. From the w3 site on button:
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities:
For example.
<button type="submit" name="buddy1" value="Yes">Toggle Yes</button>
In my site I have this code (Wordpress / Woocommerce Cart page):
<input type="submit" class="button" name="update_cart" value="Update Cart">
I want to add an update icon after the text "Update Cart" On other pages was it fairly simple using a :after pseudo element.
I don't know what I'm missing but I can't get it to work with the mark-up above.
For instance I have tried
input[name="update_cart"]::after {
etc.
}
and
.button[name="update_cart"]::after {
etc.
}
This did not work.
Please advice.
There is the following note in CSS 2.1: “Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” This has not happened so far, and browsers simply don’t implement those pseudo-elements at all for elements like input. But they do implement them for button.
So if you can change the markup, you can append generated content to the button text:
<style>
.button[name="update_cart"]:after {
content: " ⤾";
}
</style>
<input type="submit" class="button" name="update_cart" value="Update Cart">
<p>
<button type="submit" class="button" name="update_cart" value="Update Cart">Update Cart</button>
The example includes an input type=button element too, to illustrate how the button rendering is the same, except that for button, generated content works.
You can't use :after or :before on input or button element.
You can use a span element with a button inside and an :after in the span with icon (probably with a character as content using Font Awsome or Icon Moon).
Don't forget the content inside :after css, the pseudo element will not be visible if this css property isn't properly set.
So basically, I have a form submit button:
<input type="submit" id="submit" name="submit" value="Click to Search">
I would like to ONLY style the value, 'Click to Search'.
Currently, the button has a background color, although I would like to assign an individual background to just the value.
Is this possible without changing the structure of my HTML?
If that's always the value, how about using Attribute Selectors?
input[type=submit][value='Click to Search'] {
background-color: red;
}
That will style only <input>s whose type attribute's value is submit and value is Click to Search. See a demo here.
i am using this plain html code inside an aspx page. it renders well, but when clicked it submits / reloads the page. i dont want anything to be done on click of this button. whats d issue
<button>
btn1</button>
<button>
btn2</button>
It'll default to type=submit if no type is explicitly given.
You want to put
<button type="button">btn1</button>
Not sure if by pure html you can do so however this way you can black the default submit behaviour:
<button id="a" onclick="return false;">button</button>
Don't use <button>. Use <input> instead:
<input type="button" id="btn1" />
Also, worth noting (from http://www.w3schools.com/tags/tag_button.asp):
If you use the button element in an
HTML form, different browsers will
submit different values. Internet
Explorer will submit the text between
the <button> and </button> tags, while
other browsers will submit the content
of the value attribute. Use the input
element to create buttons in an HTML
form.