Please see the picture
The Andrede option have red * , that is indicating mandatory field.
I've tried Andrede<span class=required>*</span> as option value , but its not working its showing the full html tags
Option elements can contain only text.
If you want to include markup, then you need to replace the entire select element with a JavaScript widget.
I recommend changing the design so that you have a real <label> instead of using a placeholder or default value (both of which come with serious implications for accessibility). It is a webpage, so scrollbars are available. There is no need to have a cramped design.
If you are talking the given picture then they have their own select box which is build of elements other than option element
Related
I am trying to create a link that goes directly to a certain section of a different page. Here is what I'm doing.
I create an anchor point using the name attribute:
<a name="fish"></a>
<p>some content....</p>
I create a link with the # added to the end
"http://example.com#fish"
***note I have also tried the id method instead of name which still gives me the same issue.
example: <div id="fish"></div>
The functionality works fine and it takes me to the specific part on the page, the only issue is that it looks different on different browsers. What firefox displays is about 5 inches higher than what chrome displays.
It's probably because the a tag is taking up some space.
Easiest solution, use an id instead.
<p id="fish">some content....</p>
Make sure there's enough content below so it can scroll
Most browsers have the same css default value for common html elements, however it is possible that some elements have different attribute values for padding and margin.
One way to avoid these differences is explicitly applying the values in the css statements.
p {margin: 10px 0px}
If you do not want to do this, I recommend you put link exactly in the position where text is located.
<p><a name="fish"></a>some content....</p>
You can locate the link anywhere since the anchor element will not be visible in the viewport
Just wondering if its possible to store invisible data in a HTML tag that activates the element but doesn't show data.
For instance, if I had a <h1></h1> element and I wanted the element to be active so the DOM would think there was a real header there and therefore include any additional properties (ie padding, margins etc) is it possible to have the element active by putting in something between that tags that wont display on the view?
I remember seeing something ages ago that did this but can't remember where from...
You can use visibility: hidden CSS like so:
<h1 style="visibility:hidden">...</h1>
Check out https://developer.mozilla.org/en-US/docs/Web/CSS/visibility for information about visibility.
EDIT:
In order to hide the contents of the heading, you could use JavaScript or a library like jQuery. Let's take jQuery for example. You could do something like this: https://jsfiddle.net/yanpbw1v/. In this example, I am saving h1's data into a variable and then clearing h1's data out.
On my Plone (4.2) Site, I have several users who regularly paste in texts from Word or OpenOffice. These texts are sometimes aligned as "justify", whereas I would not like to allow justified text blocks on the site (because it looks ugly).
Under the "HTML Filter settings" of the Plone Control Center, it does not seem to be possible to disallow a certain html attribute setting -- one can allow match and tag attributes. I would like to disallow all <xxx align="justify"> while still allowing elements to be right-aligned with <xxx align="right">.
Is there any way to do HTML filtering based on attributes' values in Plone?
You could disallow the attribute align in Plone's html filter. Then the default align is used which is "left".
Nowadays the most common way to align a text is to use css: . The css property "text-align" could also be disallowed in that html filter. Please don't forget to remove "justify" button from the tinyMCE toolbar.
Is it possible to have an HTML select field where the OPTION text is of different colors?
<select>
<option>Black_text (yellow_text)</option>
</select>
I tried using an CSS SPAN element to color the text but that doesn't seem to work.
Any ideas?
UPDATE: Note, I'm trying to have multiple font colors on the same OPTION row. I've seen quite a few tutorials on how to style the entire OPTION row but I'm trying to style elements within the same option row.
Try to style the option elements itself:
<option style="…">Label</option>
But I doubt that browsers support much styling of these elements.
Edit
I'm trying to have multiple font colors on the same OPTION row.
That’s not possible as the option element does only allow text as content:
<!ELEMENT OPTION - O (#PCDATA) -- selectable choice -->
You probably can't do it with a plain vanilla select list. However, it probably would be possible to use Javascript + HTML + CSS to make your own "select list" using just div and span elements and that correct onclick, and onmouseover javascript. Would be much more difficult, but if it's really important, you could probably get it to work.
Why dont you put a background image on every row like this:
<option style="background-image: multicolorimage.jpg>some text</option>
sorry, wrong answer. At first I didnt understand what you are trying to do so disregard my post :)
No, but you can use stuff like http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/ that builds its own selectbox using button and span tags.
I want to practive, and even best-practice, with Html+JS+CSS.
I use a one page client-only Sudoku page.
My Sudoku markup is basically a <table>, with <td>.
(I'm open to suggestions to improve this).
My requirements :
Have a cell under focus (the keyboard notion of focus) (highlighed with css to a yellow background)
Navigate through cells with arrow keys (plus Home etc).
type-in an integer value sets that value to the currently focused cell
I use an input button inside each cell.
The Javascript works fine.
My only problem is with the display.
When a cell has the focus, it's highlighted display doesn't cover the whole TD, rather only the visual space included in the input button. I have some space around the button that isn't 'yellow'.
I don't think I could go up in the CSS selection, to select the parent of the input, could I ? Such as :
input:focus '?? how to go up ??' td { background-color:yellow;
I tried a few tricks, like having always 5 characters in each button display (5 spaces when empty, changing the middle character when set), but nothing is visually satisfying.
Even worse, it is clearly against best-practices to alter the content for the sake of visualizing. That's what the MVC distinction between Html/Css/Js is for !
I already searched this site for answer, I found close but distinct questions and answer.
I'm hoping someone could help improve my page ... and my markup skill :-)
It is not possible to construct a css selector which matches a parent node dependent on a (pseudo-)class of child node.
Basically you have two options to choose from:
Try to fill the td with the input completely using height and width rules in your css.
Set 'focused' and 'unfocused' class on your tds with javascript using the onfocus and onblur events of the inputs.
Could you not use a dash of jQuery to set a .focused class and then apply some style to it?